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
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!<j2-ng-j2></j2-ng-j2>//这里
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

六、结果

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

cd dist/ng-j2
npm login
npm publish

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

npm install ng-j2 -S

九、GitHub地址