Angular 2 project as library.

[Antoshjkee]

Hello,

Can I use your Angular 2 project to build a separate library for another application. I looked at couple examples :
https://github.com/jhades/angular2-library-example

https://github.com/jvandemo/generator-angular2-library

But I want to be able to maintain library in Visual Studio using your build.

Can you advice me how can I setup your build to simply use it as a library and publish to npm if needed.

Thank you!

[MarkPieszak]

You could open either of those projects in Visual Studio technically, an Angular library would be just a series of JS files (once everything is transpiled), which then gets published to NPM.

These templates are more-so designed to make .NET & Angular applications, you can't use .NET and other things in libraries.

Have you tried opening those generators in VSCode, should also be a nice experience!

[Antoshjkee]

I know that .NET does't need to be in library, and I don't need it. Just want to maintain a library using VS and running it in .NET, and then when publish angular library just simply ignore .NET files.

Yes, I have tried to open it in VSCode, and managed to run and publish it to npm. But my boss would like to maintain it in VS, and I am struggling to find a way to setup a base project and insert this library example.

Still playing around with your project trying to achieve this.

[MarkPieszak]

Ahh ok yeah I understand, was just wondering! Let me try and open a library in VS and see if I can help as well.

[Antoshjkee]

I have managed to setup your seed project to create a library. I have used npm publish to publish component and consume it in another project. I will create a repository with the example later on and explain what kind of changes I've done if someone will be interested in the future. Not sure if it is perfect way of doing it, but it works. Need to gather more information how to do proper way.

[Antoshjkee]

https://github.com/Antoshjkee/angular2-library-example/

1. I changed name ClientApp to src (Just prefer this way).
2. Deleted all components created automatically.
3. Moved app component to app folder. (App component is used only to be able maintain components in same project, but is excluded in publish).
4. Created components folder to store my library.
5. Created simple test component. Added inline html ( Because webpack builds a bundle of whole project, I only need this test component to be published without build, plus I need to learn webpack more to understand how it works :) ).
6. added .npmignore to ignore asp.net files, app component files and other configurations.

node_modules
npm-debug.log

Thumbs.db
.DS_Store

*.ts
!*.d.ts
*.cs

/Controllers/
/Views/
appsettings.json
Dockerfile
global.json
project.json
web.config
/wwwroot
.vs/
.deployment
obj
*.sln
*.xproj
*.xproj.user
bin
/src/app/
/src/dist/
/src/boot-client.ts
/src/boot-server.ts
!/src/components
project.lock.json
webpack.*
Properties

7. Moved all dependencies to devDependencies.

8. Changed tsconfig.json
{ "compilerOptions": { "moduleResolution": "node", "target": "es5", "sourceMap": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipDefaultLibCheck": true, "lib": [ "es6", "dom" ], "types": [ "node" ], "declaration": true }, "exclude": [ "bin", "node_modules", "src/app/app/app.component.ts", "src/boot-client.ts", "src/boot-server.ts", "src/app/app.module.ts" ], "atom": { "rewriteTsconfig": false } }
   Excluded app component and other .ts files which doesn't required in end publish. So compiler wont create declaration files for them.

9. In project root created index.ts as an entry point when consuming library.

import {NgModule, ModuleWithProviders} from "@angular/core";
import {CommonModule} from "@angular/common";
import {TestComponent} from "./src/components/test.component";


export * from "./src/components/test.component";

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        TestComponent
    ],
    exports: [
        TestComponent
    ]
})
export class SampleModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SampleModule,
            providers: []
        };
    }
}

10. in project.json added line "main": "./index.js" and changed the name.

So in the end i got this.

https://www.npmjs.com/package/ng2-another-test-component

Installed library looks like this

│   ├── src      # Library
│        ├── components  # Components
│              ├── test.component.js      # Javascript file of component
│              ├── test.component.d.ts   # component typings
│              ├── test.component.js.map   # map
│   ├── index.js              # Entry point
│   ├── index.d.ts           # typings
│   ├── package.json     # 
│   ├── tsconfig.json      #  **NEEDS TO BE REMOVED.** Causing error but still working,
└── ...

Installed in another project and imported like this

import {TestComponent} from "ng2-another-test-component";

and in HTML <test></test>

And it works!

I know it could be done better way, just need to understand how :)

[Antoshjkee]

If anyone can suggest me how can I minify/uglify and add CSS and HMTL to components js file without bundling into one big file, I would appreciate this!

[SteveSandersonMS]

Glad you found an approach that works for you.

I'll mark this as closed as it's doesn't relate to some issue in the code in this repo (though you're welcome to continue discussing it here if you want!).