How to include a local library in Angular?

Question

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.

You should install your local library with the npm link command instead of the npm install command. Docs: docs.npmjs.com/cli/link.html — Edric
– Edric, Commented Oct 14, 2019 at 9:48
cant we set the path in tsconfig.json in paths section like "paths": { "components-library": [ "../my-components-library/projects/components-library" ] } — Siddharth Pal
– Siddharth Pal, Commented Oct 14, 2019 at 9:50
Hi, you need to build your library create a package and install the package to your main module this is how library works, if you need further detail let me know will provide you — Sethuraman
– Sethuraman, Commented Jul 9, 2021 at 5:14

deepakchethan · Accepted Answer · 2022-03-22 06:29:51Z

15

You can either use `npm link`, which creates a symlink in your host apps node_modules directory.

Run npm link in the local library
Run npm link @local-library-name in the host application
But make sure you make the following changes on your host applications angular.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
            },

You can package the library into tar using `npm pack`.

Run npm pack in your library
Run npm i your-library-path.tgz in your host application
Or you can update the package.json with new dependency of the host application and run npm i

"your-library-name": "file:your-library-path.tgz",

edited Mar 22, 2022 at 6:29

answered Jun 7, 2021 at 0:56

deepakchethan

5,6301 gold badge26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vortilion Over a year ago

"sourceMap" option does not exist for Angular 14.

Vignesh Over a year ago

preserveSymlinks works fine on Angular 13 too for me.

razvanstan · Accepted Answer · 2019-10-14 10:40:07Z

1

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;

answered Oct 14, 2019 at 10:40

razvanstan

323 bronze badges

Collectives™ on Stack Overflow

How to include a local library in Angular?

2 Answers 2

You can either use `npm link`, which creates a symlink in your host apps node_modules directory.

You can package the library into tar using `npm pack`.

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

You can either use npm link, which creates a symlink in your host apps node_modules directory.

You can package the library into tar using npm pack.

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

You can either use `npm link`, which creates a symlink in your host apps node_modules directory.

You can package the library into tar using `npm pack`.