Linking local library into Angular 5 Project

Question

What i want is to have a library locally that when i change it those changes are reflected in the project that is using the library.

i have check out this library here in my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc

So what i'm doing right now, is that i go to the library directory and then npm link

And then get in my project directory and do

npm link angular-oauth2-oidc

The library folder appears inside my node_modules folder but i can't manage to use it, since when i start the app ng serve it says:

Cannot find module 'angular-oauth2-oidc'

I'm importing like this:

import { OAuthModule } from 'angular-oauth2-oidc';

I've tried to add the the path under the compilerOptions of the tsconfig.json file but haven't been sucessful.

Any ideas on what i'm missing here? I've tried several suggestions i've found on angular github issues but none solved my problem.

Thanks in advance

Answer 1

npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed

Dont use npm link to add a library to your project, use npm install :

npm install angular-oauth2-oidc --save

Answer 2

You have to install it not just link it, so use this line to with flag --save to ensure that it will be saved in your package.json

npm install [package_name] --save

You can get the package name from the source website or from https://www.npmjs.com/package/angular2

Answer 3

When you say:

So what i'm doing right now, is that i go to the library directory and then npm link

Do you mean you are executing npm link in the folder you cloned the repository in? Because if so, that's likely your issue as that's the source directory and not what's actually published as a package. You must build the library, change directory into the distribution folder for the package, and then run npm link . Then when you run builds of that library, any Angular applications with that linked will automatically have the last version of your build in their node_modules.

Also, in your Angular applications where you are using the linked library you'll want to make sure you are setting preserveSymlinks to true in your angular.json.

Answer 4

While you can create multiple projects (eg an Angular app and an Angular library) under one Angular project to make this process a bit easier, I prefer to separating these two since I like one git repository to present one module.

First, you need to link your modules to your project's package.json file. Here's how to link files locally in general: Local dependency in package.json

Linking a plain Typescript library is pretty straight forward as you just create an entry point (usually index.ts ) file and export everything you want from there. This file needs to be in the same folder as the package.json file in your project.

An Angular library is a bit different as angular modules needs to be compiled before it can be properly exported. If you just import the module to your project without compiling you will get an error stating this: cannot read property 'ɵmod' . This happens at least at the time of writing this.

So we need to compile the library and then link it:

• open two terminal windows

• in the first terminal, go to your Angular library's root folder and run ng build --watch

• check the output folder of the compiled module, usually something like dist/[library name]

• change your Angular project's package.json to point to the output folder eg "my-angular-library": "file:../my-angular-library/dist/my-angular-library"

• run npm install in the same folder

• Add path to your Angular project's tsconfig.json eg:

  compilerOptions: { "paths": { "my-angular-library": ["./node_modules/my-angular-library"] } }

Otherwise you'll get errors like Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library

• in the second terminal, go to your Angular project's root folder and run ng serve . Make sure you serve the project only after you have installed the local dependency.

You should now be able to use components, services etc. exported via your library module.

TL;DR

• for the library ng build --watch

• make the library dependency to point to the output folder eg "my-angular-library": "file:../my-angular-library/dist/my-angular-library"

• npm i

• Add path to your Angular project's tsconfig.json eg:

  compilerOptions: { "paths": { "my-angular-library": ["./node_modules/my-angular-library"] } }

• ng serve