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?
I found this article that helped me to solve my problem:
To give a brief summary, this is how I proceeded:
npm install -g ng-packagr
npm install ng-packagr --save-dev
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:
create public_api.ts
in the root folder of the project, and add the following:
export * from './src/app/modules/myFeature/my-feature.module'
Edit package.json
, and add the packagr
line to the scripts
tag:
"scripts": {
//...
"packagr": "ng-packagr -p ng-package.json"
}
Create the package by running the following command from the root folder:
npm run packagr
Install it for local development:
dist
folder:npm pack
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