Create library in Angular 4 and Angular 6
Create library in Angular 4:
/////////////////////////////////////////////////////////////
///////////////// create Angular Lip //////////////////////
1.) ng new example-ng6-lib-app
rename folder name "example-ng6-lib-app" to "example-ng6-lib"
2.) cd example-ng6-lib
ng serve
3.) ng generate library example-ng6-lib --prefix=enl
4.) ng build example-ng6-lib
5.) import in module files ie..
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ExampleNg6LibModule } from 'example-ng6-lib';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ExampleNg6LibModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
6.) to create more component in library use ie..
ng generate component foo --project=example-ng6-lib
7.) add that component in lib module files i.e...
import { NgModule } from '@angular/core';
import { ExampleNg6LibComponent } from './example-ng6-lib.component';
import { FooComponent } from './foo/foo.component';
@NgModule({
imports: [
],
declarations: [
ExampleNg6LibComponent,
FooComponent
],
exports: [
ExampleNg6LibComponent,
FooComponent
]
})
export class ExampleNg6LibModule { }
8.) mention that component in following files...
projects\example-ng6-lib\src\public_api.ts
like ie...
export * from './lib/foo/foo.component';
9.) use following code for live watch i.e..
ng build example-ng6-lib --watch
/////////////////////////////////////////////////////////////
///////////////// public into NPM /////////////////////////
1.) add following line in script file on main package.json files i.e..
"scripts": {
...
"build_lib": "ng build example-ng6-lib",
"npm_pack": "cd dist/example-ng6-lib && npm pack",
"package": "npm run build_lib && npm run npm_pack"
},
2.) npm run package
3.) For testing add foloowing line in package.json and do "npm install"
i.e..
npm install ../example-ng6-lib/dist/example-ng6-lib/example-ng6-lib-0.0.1.tgz
4.) in Project folder package.json add following info for npm i.e..
{
.....
"name": "Package Name",
"version": "1.0.0",
"author": "Ramesh M",
"description": "Dummy Test",
"keywords": [
"Angular",
"Library"
],
"license": "SEE LICENSE IN LICENSE",
"repository": {
"type": "git",
"url": "https://github.com/rameshirreplaceable/cubex-single-multiselect-dropdown"
},
.....
}
5.) npm login
it will ask npm username and pass so enter that i.e..
username: ******* pass: *******
using "npm whoami" u check
6.) finally publish i.e...
npm publish ./dist/example-ng6-lib/example-ng6-lib-0.0.1.tgz
Comments
Post a Comment