10

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?

Strider
  • 3,539
  • 5
  • 32
  • 60
  • It adds the package to your `package.json`, but it's most likely not installing the module into your node_modules. – Z. Bagley Jan 05 '18 at 02:27
  • In my `node_modules`, the folder `@myscope/myModule` is created, and inside it, there is a link to `../path-to-my-module`. I will add this information into my question – Strider Jan 05 '18 at 10:02

1 Answers1

17

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

Strider
  • 3,539
  • 5
  • 32
  • 60
  • Hi, I managed to do the same. My question is how do you continuously build the component library without have to re-build it each time you want to see a change in your project that is actually consuming the component library? – TerNovi Apr 06 '18 at 20:03
  • Unfortunately I didn't find a direct way that allows to reflect the change that is made in the component library directly in the final project that uses it. Maybe automating a script can do the job? Like for example: 1. Build the library `npm run packagr` 2. Package it `npm pack` 3. Install it `npm install ../some-relative-path/dist/my-component-library-0.0.0.tgz` – Strider Apr 08 '18 at 12:59
  • After doing some digging I found some examples that are supposed to do a reload whenever one of the files in the library project change. Take a look here. So far I have tried it and I have not gotten the results they are mentioning. https://github.com/jvandemo/generator-angular2-library#how-can-i-avoid-recompilation-during-development . The other thing I see is that there was a ticket in relation to not being able to recompile the ts files inside lib project. https://github.com/jvandemo/generator-angular2-library/issues/72. This example is with yeoman and I did switch over to try. – TerNovi Apr 08 '18 at 15:59
  • instead of `npm pack`, can we use `npm link`? – Sumit Ramteke Jul 18 '18 at 09:28
  • 1
    @TerNovi With Angular CLI 6.2 there is a way to build a library in `--watch` mode: https://github.com/angular/angular-cli/wiki/stories-create-library#why-do-i-need-to-build-the-library-everytime-i-make-changes – Markus Pscheidt Oct 03 '18 at 13:41