ng-zero和ng-alain 使用ng-packagr發佈

• alain 打包發佈組件，ng-zero也能夠用

  • 安裝依賴

  • 目錄結構

    • 文件具體內容

      • ng-package.json
      • package.json
      • public-api.ts
    • 要發佈的組件
  • 配置angular.json
  • 測試模塊

alain 打包發佈組件，ng-zero也能夠用

本文參考了 https://angularfirebase.com/l... 以及alain的的package的組件結構

安裝依賴

打包須要安裝一個angular的插件ng-packagr

npm install ng-packagr -save-dev

目錄結構

目錄結構就是沒有大改動，爲了方便調試本身的組件，和alain相似，src下的目錄結構，若是想發佈須要添加幾個文件

│  browserslist
│  favicon.ico
│  hmr.ts
│  index.html
│  karma.conf.js
│  main.ts
│  ng-package.json     --新加
│  package.json        --新加
│  polyfills.ts
│  public-api.ts       --新加
│  styles.css
│  styles.less
│  test.ts
│  tsconfig.app.json
│  tsconfig.lib.json   --新加
│  tsconfig.spec.json
│  tslint.json
│  typings.d.ts
│
├─app
├─assets
├─environments
├─styles
└─testing

文件具體內容

• ng-package.json 打包用的配置
• package.json 發佈包的package.json
• public-api.ts 用來導出的文件
• tsconfig.lib.json ts編譯配置

ng-package.json

{
  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../dist",
  "deleteDestPath": true,
  "lib": {
    "entryFile": "public-api.ts"
  }
}

package.json

{
  "name": "@zhang/component",  //這個就是最後的名字
  "version": "1.0.1",
  "peerDependencies": {
    "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
    "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
    "@delon/abc": "^1.1.3",
    "@delon/acl": "^1.1.3",
    "@delon/auth": "^1.1.3",
    "@delon/cache": "^1.1.3",
    "@delon/form": "^1.1.3",
    "@delon/mock": "^1.1.3",
    "@delon/theme": "^1.1.3",
    "@delon/util": "^1.1.3",
    "ng-zorro-antd": "^1.2.0",
    "ng-alain": "^1.1.3"
  }
}

全部須要的依賴寫寫

public-api.ts

export * from './app/package/zhang-component.module';

導出主module

src/app目錄下添加一個須要發佈模塊，下面須要有一個主的module文件

├─core
├─layout
├─package -新加
├─routes
└─shared

我這裏叫zhang-component.module.ts
具體內容

import { ModuleWithProviders, NgModule } from '@angular/core';

import { CommonModule } from "@angular/common";

import { TestCcModule } from './test-cc/test-cc.module';
import { DataChartModule } from './data-chart/data-chart.module';
import { DataCardModule } from './data-card/data-card.module';
import { ModelTreeModule } from './model-tree/model-tree.module';
/*這裏就是咱們新建的module*/
import {DemoModuleModule} from './demo-module/demo-module.module'

export * from './data-chart';
export * from './data-card';
export * from './test-cc';
export * from './model-tree';
/*一樣將目錄導出，會默認找目錄下的index.ts*/
export * from './demo-module/';

const MYMODULES = [
  TestCcModule,
  DataChartModule,
  DataCardModule,
  ModelTreeModule,
  /*將Module加入到數組內*/
  DemoModuleModule
];

@NgModule({
  imports: [
    CommonModule,
    TestCcModule.forRoot(),
    DataChartModule.forRoot(),
    DataCardModule.forRoot(),
    ModelTreeModule.forRoot(),
    /*這裏很重要,做爲共享模塊須要forRoot*/
    DemoModuleModule.forRoot()
  ],
  exports: [
    MYMODULES
  ]
})
export class ZhangComponentRootModule {

}
@NgModule({ exports: MYMODULES })
export class ZhangComponentModule {
  static forRoot(): ModuleWithProviders {
    return { ngModule: ZhangComponentRootModule };
  }
}

要發佈的組件

在package目錄下正經常使用ng命令建立module就能夠

而後稍加修改

│  zhang-component.module.ts
│
├─demo-module  --ng g m 生成
│  │  demo-module.module.ts
│  │  index.ts   --手動添加index.ts 
│  │
│  └─demo-component
│          demo-component.component.html
│          demo-component.component.less
│          demo-component.component.ts

index.ts內容

export * from './demo-module.module';
export * from './demo-component/demo-component.component';

將須要文件導出，上面會自動找到 index.ts文件

demo-module.module文件修改,要注意組件用到的依賴包都寫在這個文件裏

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [DemoComponentComponent],
  exports:[DemoComponentComponent] //將Component導出
})
export class DemoModuleModule {
  //設置爲共享模塊
  static forRoot(): ModuleWithProviders {
    return { ngModule: DemoModuleModule, providers: [] };
  }
 }

默認的ModuleWithProviders是沒有導入的，須要在頭部加入

import { NgModule } from '@angular/core';

改爲

import { NgModule,ModuleWithProviders } from '@angular/core';

配置angular.json

上面都完成了，須要修改跟目錄下angular.json來打包

在projects節點下加一個本身的配置

"zhang-ui": {   //這裏寫啥都行，就是個命令的名字
      "root": "src",
      "sourceRoot": "src/app",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "src/tsconfig.lib.json", //讀取的編譯文件
            "project": "src/ng-package.json" //讀取的配置
          },
          "configurations": {
            "production": {
              "project": "src/ng-package.json"
            }
          }
        }
      }
    }

最後在根目錄下的package.json裏面添加一個命令

"scripts": {
    "ng": "ng",
    "start": "ng serve -o --port 4444",
    "build": "ng build --prod --build-optimizer",
    "test": "ng test",
    "lint": "npm run lint:ts && npm run lint:style",
    "e2e": "ng e2e",
    "package": "ng run zhang-ui:build",  //這個就是打包的命令
    "analyze": "ng build --prod --build-optimizer --stats-json",
    "test-coverage": "ng test --code-coverage --watch=false",
    "lint:ts": "tslint -p src/tsconfig.app.json -c tslint.json 'src/**/*.ts'",
    "lint:style": "stylelint \"{src}/**/*.less\" --syntax less",
    "lint-staged": "lint-staged",
    "tslint-check": "tslint-config-prettier-check ./tslint.json",
    "hmr": "ng serve -c=hmr"
  }

執行

npm run package

或者

ng run zhang-ui:build

均可以，最後會打包到dist目錄下
而後npm publish ./dist 就能夠了

測試模塊

爲了方便查看效果

在routes.module.ts文件

├─app
│  └─routes
│          routes.module.ts

import {ZhangComponentModule} from "../package/zhang-component.module"; //引入

...
@NgModule({
  imports: [SharedModule, RouteRoutingModule, ZhangComponentModule],  //導進來
  declarations: [
    ...COMPONENTS,
    ...COMPONENTS_NOROUNT
  ],
  entryComponents: COMPONENTS_NOROUNT
})
export class RoutesModule {
}

其餘就按照angular的方式該怎麼寫怎麼寫行了

其餘項目使用

發佈好了就能夠

npm install '@zhang/component'

本地能夠直接，我這是windows,具體根據本身的目錄來

npm install 'D:\Code\demo\my-component\dist'