如何将 Angular 项目设置为另一个 Angular 项目的 package.json 中的依赖项答案

【问题标题】：How to setup angular project as a dependency in package.json of another angular project如何将 Angular 项目设置为另一个 Angular 项目的 package.json 中的依赖项
【发布时间】：2018-04-19 12:34:56
【问题描述】：

我有三个不同的 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 包。

【问题讨论】：

尝试使用 npm pack 打包您的 y 和 z 项目，或者对于本地开发，您可以使用 npm 链接。并在 X 项目 package.json 中将它们引用为 npm install path_to_y.tgz 和 npm install path_to_z.tgz，然后从 node_modules/Y/module_name 延迟加载模块

标签： angular npm angular-cli sinopia

【解决方案1】：

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

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

【讨论】：

感谢您的回复。仅当我使用 Yeoman generate 创建项目时才有用。但是这里我的项目是一个现有的项目，我是用 angular cli 创建的。
如果你想将你的 Angular cli 项目转换成一个包，没有问题。您只需将代码从 app 目录（anguar cli 项目）复制到 src 目录（由此生成器创建的项目），是的，您需要从 package.json 复制依赖项。

【解决方案2】：

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

将您的项目“y”和“z”转换为库
将该库打包到 npm 包中
让“x”使用该库

简而言之，您可以这样做：

我强烈建议使用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
通过运行npm pack 创建npm 包，这将生成一个y-1.0.0.tgz 文件，其中y 是您的项目名称，1.0.0 是您在package.json 中设置的版本
现在您可以通过运行 npm install ./relative/path/to/y-1.0.0.tgz 将其作为依赖项安装到项目“x”中，大功告成！

这篇文章是基于这个article。

【讨论】：

【解决方案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 导入数组中……

import { HeaderModule } from 'my-package-name';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HeaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：