How to configure angular project as dependency in .json package of another angular project

Question

I have three different Angular cli projects (X, Y, Z). I want to make [X] as the parent project, while I want to add Y and Z as dependencies of the npm package on X. This means that [X] package.json will contain the dependencies [Y] and [Z] as follows way.

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

How to create these dependencies?

Note. Right now I have Y and Z as a lazy loaded folder inside X. What I want to share as an independent npm package.

Answer 1

You need to pack your Y and Z projects and publish them to the npm repository, or you can develop it locally and use them through the npm link ... Here is the Yeoman generator that can help you.

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

Answer 2

You basically want to do this in 3 steps:

• Turn your "y" and "z" projects into a library
• Install this library in npm package
• Let "x" consume this library

Here's how you do it shorter:

• I highly recommend using ng-packagr to create a library from "y" and "z". ng-packagr allows ng-packagr to take an existing Angular CLI project and turn it into a library. There are basically five things you need to do:

  • install the package with: npm install ng-packagr --save-dev

  • add ng-package.json with the following contents:

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

  • add public_api.ts with the export of your modules, i.e.

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

  • add script to package.json : "packagr": "ng-packagr -p ng-package.json"

  • run the script: npm run packagr

• Create an npm package by running npm pack , which will generate the y-1.0.0.tgz file, where y is the name of your project and the 1.0.0 version that you installed in your package.json

• Now you can install this as a dependency in your "x" project by running npm install ./relative/path/to/y-1.0.0.tgz and you npm install ./relative/path/to/y-1.0.0.tgz done!

This post is based on this article .

Answer 3

These are all steps, if it is not clear, let me know. When you create two cli projects:

1) Export the component that you want to use from the library project:

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

2) Install ng-packagr:

 npm install ng-packagr --save-dev 

3) Add two files to the library project, ng-package.json and public_api.ts:

The contents of ngpackage.json:

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

4) Export the module that you want to use in the main project:

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

5) In the library project, edit the package.json file containing this:

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

6) Run npm run packagr , and once the process is complete, you will find the dist folder in the root of your project. This is your component library.

7) cd to the dist folder and run the npm package. This will create a file in the root of the dist folder.

8) Then you can publish it to npm or use it directly from bitpack, github, etc. Just add the dependency in the .json package of the main project.

9) After installation, you can import your component into any app.module.ts applications by including it in your @NgModule import array ...

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