[英]How to setup angular project as a dependency in package.json of another angular project
I have three different Angular cli projects (X, Y, Z). 我有三个不同的Angular cli项目(X,Y,Z)。 I want to make [X] as a parent project while I want to add Y and Z as npm package dependencies to X. That means [X] package.json will contain the dependencies of [Y] and [Z] as follows.
我想将[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"
}
How to create those dependencies? 如何创建这些依赖项?
Note: Right now I have Y and Z as a lazy loaded folder inside X. Which I want to decouple as independent npm package. 注意:现在我将Y和Z作为X中的延迟加载文件夹。我想将其解耦为独立的npm包。
Basically you want to do this in 3 steps: 基本上你想分三步完成:
Here is how you do it in short: 以下是您如何做到这一点:
I highly recommend using ng-packagr for creating the library out of "y" and "z". 我强烈建议使用ng-packagr从“y”和“z”创建库。
ng-packagr
allows you to take an existing Angular CLI
project and turn it into a library. ng-packagr
允许您获取现有的Angular CLI
项目并将其转换为库。 Basically you have to do five things: 基本上你必须做五件事:
npm install ng-packagr --save-dev
npm install ng-packagr --save-dev
add ng-package.json
with the following content: 使用以下内容添加
ng-package.json
:
{ "$schema": "./node_modules/ng-packagr/ng-package.schema.json", "lib": { "entryFile": "public_api.ts" } }
add public_api.ts
with the exports of your modules, ie 使用模块的导出添加
public_api.ts
,即
export * from './src/app/modules/example/example.module'
add script to package.json
: "packagr": "ng-packagr -p ng-package.json"
将脚本添加到
package.json
: "packagr": "ng-packagr -p ng-package.json"
npm run packagr
npm run packagr
Create the npm-package by running npm pack
which will generate a y-1.0.0.tgz
-file, where y
is your projects name and 1.0.0
the version you set in your package.json
通过运行
npm pack
创建npm-package,它将生成一个y-1.0.0.tgz
-file,其中y
是你的项目名称, 1.0.0
是你在package.json
设置的版本
Now you can install this as dependency in your project 'x' by running npm install ./relative/path/to/y-1.0.0.tgz
and you're done! 现在你可以通过运行
npm install ./relative/path/to/y-1.0.0.tgz
将它作为项目'x'中的依赖项npm install ./relative/path/to/y-1.0.0.tgz
,你就完成了!
Those are all the steps, if any of it is not clear let me know. 这些都是步骤,如果有任何不明确的地方让我知道。 Once you have the two cli projects created:
一旦创建了两个cli项目:
1) Export the component you want to use from your library project: 1)从库项目中导出要使用的组件:
@NgModule({
...
exports: [MyComponent]
...
2) Install ng-packagr: 2)安装ng-packagr:
npm install ng-packagr --save-dev
3) Add two files to your library project, ng-package.json and public_api.ts: 3)将两个文件添加到库项目ng-package.json和public_api.ts:
ngpackage.json content: ngpackage.json内容:
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts"
}
}
4) Export the module you want to use in the main project: 4)导出要在主项目中使用的模块:
export * from './src/app/modules/whatever.module'
5) In your library project edit the package.json file to contain this: 5)在库项目中编辑package.json文件以包含:
"scripts": {
...
"packagr": "ng-packagr -p ng-package.json"
}
6) Run npm run packagr
, and once the process is complete you'll find a dist folder in your project root. 6)运行
npm run packagr
,一旦完成该过程,您将在项目根目录中找到dist文件夹。 This is your component library. 这是您的组件库。
7) cd
into the dist folder and run npm pack. 7)
cd
进入dist文件夹并运行npm pack。 This will create a file in the root of the dist folder. 这将在dist文件夹的根目录中创建一个文件。
8) Then you have the option of publish it on npm, or consume it directly from bitbucket, github, etc. Just in the package.json of the main project add the dependency. 8)然后你可以选择在npm上发布它,或直接从bitbucket,github等消费它。只需在主项目的package.json中添加依赖项。
9) Once installed, you can import your component into any application's app.module.ts, by including it in its @NgModule imports array… 9)安装完成后,您可以将组件导入任何应用程序的app.module.ts,方法是将其包含在@NgModule导入数组中...
import { HeaderModule } from 'my-package-name';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HeaderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
You need to package your Y and Z projects and publish them on npm repository or you can develop it locally and use them via npm link... Here the Yeoman generator that can help you out. 您需要打包Y和Z项目并将它们发布在npm存储库中,或者您可以在本地开发它并通过npm链接使用它们......这里可以帮助您的Yeoman生成器。
https://github.com/jvandemo/generator-angular2-library https://github.com/jvandemo/generator-angular2-library
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.