7

我有三个不同的 Angular cli 项目（X、Y、Z）。我想将 [X] 作为父项目，同时我想将 Y 和 Z 作为 npm 包依赖项添加到 X。这意味着 [X] package.json 将包含 [Y] 和 [Z] 的依赖项，如下所示。

"dependencies": {
    "@angular/common": "^4.0.0",
    //.. other angular dependency
    "y": "1.0.1",
    "z": "1.0.3"
}

如何创建这些依赖项？

注意：现在我将 Y 和 Z 作为 X 中的延迟加载文件夹。我想将其解耦为独立的 npm 包。

4

3 回答 3

7

基本上你想通过 3 个步骤来做到这一点：

  1. 将您的项目“y”和“z”变成一个库
  2. 将该库打包到 npm-package 中
  3. 让“x”使用那个库

简而言之，这是您的操作方法：

  1. 我强烈建议使用ng-packagr从“y”和“z”创建库。ng-packagr允许您获取现有Angular CLI项目并将其转换为库。基本上你必须做五件事：

    • 安装包：npm install ng-packagr --save-dev

    • 添加ng-package.json以下内容：

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

    • 添加public_api.ts模块的导出，即

      export * from './src/app/modules/example/example.module'

    • 将脚本添加到package.json： "packagr": "ng-packagr -p ng-package.json"

    • 运行脚本：npm run packagr

  2. 通过运行创建 npm 包，npm pack这将生成一个y-1.0.0.tgz-file，y您的项目名称和1.0.0您在您的设置中设置的版本在哪里package.json

  3. 现在您可以通过运行将其作为依赖项安装在您的项目“x”中npm install ./relative/path/to/y-1.0.0.tgz，您就完成了！

这篇文章是基于这篇文章。

于 2018-01-18T08:51:02.803 回答
3

以上就是全部步骤，如果有不清楚的请告诉我。创建两个 cli 项目后：

1) 从库项目中导出要使用的组件：

@NgModule({
  ...
  exports: [MyComponent]
  ...

2) 安装 ng-packagr：

npm install ng-packagr --save-dev

3) 将两个文件添加到您的库项目中，ng-package.json 和 public_api.ts：

ngpackage.json 内容：

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

4）导出要在主项目中使用的模块：

export * from './src/app/modules/whatever.module'

5) 在您的库项目中编辑 package.json 文件以包含以下内容：

"scripts": {
  ...
  "packagr": "ng-packagr -p ng-package.json"
}

6）运行npm run packagr，一旦该过程完成，您将在项目根目录中找到一个 dist 文件夹。这是您的组件库。

7)cd进入 dist 文件夹并运行 npm pack。这将在 dist 文件夹的根目录中创建一个文件。

8）然后你可以选择在npm上发布它，或者直接从bitbucket、github等使用它。只需在主项目的package.json中添加依赖。

9) 安装后，您可以将组件导入任何应用程序的 app.module.ts，方法是将其包含在其 @NgModule 导入数组中……</p> 

import { HeaderModule } from 'my-package-name';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HeaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
于 2018-01-18T11:21:16.717 回答
0

你需要打包你的 Y 和 Z 项目并将它们发布到 npm 存储库上，或者你可以在本地开发它并通过 npm 链接使用它们......这里的 Yeoman 生成器可以帮助你。

https://github.com/jvandemo/generator-angular2-library

于 2018-01-13T04:36:05.947 回答