对Angular 模块ng-packgar打包并在另一项目中使用( 本测试是在Angular6）

1. 新建ng项目、模块、组件

ng new ccc
cd src/app
ng g m sys
cd sys
ng g c test

2. 修改sys.module.ts 文件，添加 exports: [TestComponent]

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestComponent } from './test/test.component';

@NgModule({
  declarations: [TestComponent],
  imports: [
    CommonModule
  ],
  exports: [TestComponent]
})
export class SysModule { }

3. 修改app.module.ts文件，引用 SysModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SysModule } from './sys/sys.module';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SysModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 4. 回到当前项目根目录，新建ng-package.json文件，内容：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

5. 新建 public_api.ts 文件，内容：

export * from './src/app/sys/sys.module';

6. 安装组件 ng-packagr、typescript、tsickle

npm install ng-packagr --save-dev
npm  install  -g  typescript  typings
npm install tsickle

7. 修改package.json文件，添加  "packagr": "ng-packagr -p ng-package.json",删除 dependencies

{
  "name": "ccc",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "packagr": "ng-packagr -p ng-package.json"
  },
  "private": false,
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.8",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng-packagr": "^5.1.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

8. 执行 npm run packagr 打包，生成 dist 文件，进入 dist目录，执行 npm pack,在项目根生成  ccc-0.0.0.tgz

npm run packagr
cd dist
npm pack

特别在执行打包时容易报错，折腾了一阵，原来以为是 nodejs 和 npm 版本问题，搞的又重装了环境，不是环境问题，把该安装的插件都安装了，基本就不会出错（个人建议）。

9. 在另一项目中引用：

     方法1：本项目发布  执行 npm publish ，在另一项目中 先安装，再引用即可。（ps：本机试了，没成功。。）

     方法2：一般项目中都用这种方法，将打好的tgz包直接放到要引用的项目中 node_modules 目录下，解压（修改名称，一般解压出来的是 package 文件，重命名即可 ），修改为ccc

修改应用项目的app.module.ts文件，引用模块 SysModule ：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SysModule } from 'ccc';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SysModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 app.component.html 添加组件 ： <app-test></app-test>

运行，访问成功图：

原文访问：

https://blog.csdn.net/LittleDragonHu/article/details/86290512