Pack/Import a local developed module into a project

Strider picture Strider · Jan 5, 2018 · Viewed 20.9k times · Source

I am trying to import a locally developed Angular project/module into an angular application without publishing it into npm repository.

First, I followed this tutorial to build my module in UMD format (I skipped the publish part):

https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

Then, I tried to install my module in the final application by executing this command line:

npm install ../path-to-my-module --save

This added successfully my module as @myscope/myModule in the package.json of my application, but the problem is that the import of the module in the application isn't recognized. I ended up by getting the following error:

Cannot find module @myscope/myModule

In my node_modules, the folder @myscope is created, and inside it, there is a shortcut to ../path-to-my-module with the name myModule

Could the fact that there is a shortcut be the source of the problem? and if so how to fix it?

Answer

Strider picture Strider · Jan 8, 2018

I found this article that helped me to solve my problem:

https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e


To give a brief summary, this is how I proceeded:

  1. Install ng-packagr:
    • Install it globally:
      npm install -g ng-packagr
    • Install it in the project module:
      npm install ng-packagr --save-dev
  2. create ng-package.json in the root folder of the project, and add the following:
    {
      "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
      "lib": {
        "entryFile": "public_api.ts"   
        "externals": {
          "@angular/cdk": "ng.cdk",
          "@angular/cdk/accordion": "ng.cdk.accordion",
           //...
        }
      }
    }

In my case I had to add external dependencies in order to avoid packaging/build errors:

  1. create public_api.ts in the root folder of the project, and add the following:

    export * from './src/app/modules/myFeature/my-feature.module'

  2. Edit package.json, and add the packagr line to the scripts tag:

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

  1. Create the package by running the following command from the root folder:

    npm run packagr

  2. Install it for local development:

    • Pack the module by running the following command from the dist folder:
      npm pack
    • Install the packed module from the final project:
      npm install ../some-relative-path/dist/my-component-library-0.0.0.tgz

Then I could import my module from any other module or component of my final project