美文网首页
How To Publish An Angular Librar

How To Publish An Angular Librar

作者: 凌杰991 | 来源:发表于2019-09-26 06:04 被阅读0次

    First initialize an project

    $ ng new project-name --createApplication=false
    

    If you want to use scss for your styling, just use the style flag and point it to scss

    $ ng new project-name --createApplication=false --style=scss
    

    Create your angular library

    $ cd project-name
    $ ng generate library library-name
    

    If you want to use your own prefix to replace lib that Angular CLI uses by default, use prefix flag and point it to new prefix-name

    $ cd project-name
    $ ng generate library library-name --prefix=prefix-name
    

    Warning: You can't remove the service even though it is no use in your library, please don't forget to export your LibraryComponent in your LibraryModule

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { LibraryComponent } from './library-name.component';
    import { LibraryService } from './library-name.service';
    
    @NgModule({
      declarations: [LibraryComponent],
      imports: [
        CommonModule
      ],
      providers: [LibraryService],
      exports: [LibraryComponent]
    })
    export class LibraryModule { }
    

    Test your library first before publishing it to npm

    # Build your library for local testing
    $ ng build library-name
    
    # Create a angular project to test your library
    $ ng generate application project-name-test
    

    Test your library in app module

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { LibraryModule } from 'library-name';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        LibraryModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

    Usage in your app html

    <lib-library-name />
    

    If you have defined your own prefix, try the following

    <prefix-name-library-name />
    

    相关文章

      网友评论

          本文标题:How To Publish An Angular Librar

          本文链接:https://www.haomeiwen.com/subject/uejquctx.html