While I was creating an Angular
application I wanted to build a library where I can put components which can be useful even in other projects. In order to create the library I've made another Angular
workspace where I've generated the library project and used the application project generated automatically within the workspace to show individual components.
ng new my-components-library
cd my-components-library
ng generate library components-library
Now I have a library with working components which pass the unit tests and works properly in the attached application project but I need them in my project's workspace. I tried to include the library on this way.
Inside my project workspace
npm install ../my-components-library/projects/components-library
the command run properly and I get a reference to the library into the host project's package.json
but when I have to include modules from the external library in a project's module using import {myModule} from 'components-library'
I get an error because Angular can't find the module.
npm link
, which creates a symlink in your host apps node_modules directory.npm link
in the local librarynpm link @local-library-name
in the host applicationangular.json
file. If you are using less angular 11 or lower, then add "preserveSymlinks": true
else sourceMap
with scripts
, styles
, vendor
as true "build": {
"options": {
"preserveSymlinks": true, // angular 11 or less
}
},
{
"projects": {
"your-app": {
"architect": {
"build": {
"options": {
"sourceMap": { // angular 12 or more
"scripts": true,
"styles": true,
"vendor": true
},
npm pack
.npm pack
in your librarynpm i your-library-path.tgz
in your host applicationnpm i
"your-library-name": "file:your-library-path.tgz",
Need to register in angular.json
"scripts": ["src/assets/scripts/yourComponentLibrary.js"]
In you component where you want to use the library, need to declare as a const above @Component({...
declare const YourComponentLibraryName: any;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With