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

Question

I have three different Angular cli projects (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.

"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.

Answer 1

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.

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

Answer 2

Basically you want to do this in 3 steps:

1. Turn your projects "y" and "z" into a library
2. Pack that library into an npm-package
3. Let "x" consume that library

Here is how you do it in short:

1. I highly recommend using ng-packagr for creating the library out of "y" and "z". ng-packagr allows you to take an existing Angular CLI project and turn it into a library. Basically you have to do five things:

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

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

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

   • add public_api.ts with the exports 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

2. 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

3. 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!

This post is based on this article.

Answer 3

Those are all the steps, if any of it is not clear let me know. Once you have the two cli projects created:

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

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

2) Install ng-packagr:

npm install ng-packagr --save-dev

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

ngpackage.json content:

{
  "$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:

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

5) In your library project edit the package.json file to contain this:

"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. This is your component library.

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

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.

9) Once installed, you can import your component into any application’s app.module.ts, by including it in its @NgModule imports array…

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