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

Popular posts from this blog

Module Bundel

Power of async and Promise