Question

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

Answer 1

基本上你想分三步完成：

转动您的项目＆＃34; y＆＃34;和＆＃34; z＆＃34;进入图书馆
将该库打包到npm-package
让＆＃34; x＆＃34;消耗该库

以下是您如何做到这一点：

我强烈建议您使用ng-packagr来创建＆＃34; y＆＃34;和＆＃34; z＆＃34;。 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-package，生成y-1.0.0.tgz - 文件，其中y是您的项目名称，1.0.0是您设置的版本在您的package.json
现在您可以在项目中将其作为依赖项安装＆＃39; x＆＃39;通过运行npm install ./relative/path/to/y-1.0.0.tgz，您已完成！

此帖子基于此article。

Answer 2

这些都是步骤，如果有任何不明确的地方请告诉我。一旦创建了两个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 { }

Answer 3

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

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

如何在另一个角项目的package.json中将angular project设置为依赖项

3 个答案: