angular6-自定义库开发入门实践

一、创建ng项目

ng new ng-wl-ui

二、创建项目库

ng generate library ng-j2 --prefix=j2

此命令会做以下几件事：

• 创建projects目录
• 修改angular.json文件
• 修改tsconfig.json文件
• 安装ng-packagr

三、添加库构建脚本package.json/scripts

"build:library": "ng build ng-j2"

四、执行构建

npm run build:library

五、本项目中使用

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgJ2Module } from 'ng-j2';//这里

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgJ2Module//这里
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

//app.component.html

  

    Welcome to {{ title }}!//这里
  
  

Here are some links to help you start: 

  

    
Tour of Heroes
  
  

    
CLI Documentation
  
  

    
Angular blog
  

六、结果

七、发布到npm上（在这之前你需要去注册一个npm账号）

cd dist/ng-j2
npm login
npm publish

八、在项目中通过npm安装使用

npm install ng-j2 -S

九、GitHub地址