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

Partha Sarathi Ghosh picture Partha Sarathi Ghosh · Nov 7, 2017 · Viewed 8.2k times · Source

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

tommueller picture tommueller · Jan 18, 2018

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.