Pack/Import a local developed module into a project

Question

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 1

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:

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

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

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

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

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

   npm run packagr

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