4

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

gmemario
  • 1,190
  • 23
  • 35
  • How is the lib packaged – Mike Tung Jan 19 '18 at 13:02
  • I just check out into my local machine, i'm kind of new to this so i haven't run anything on top of it. Only thing is that i would like to have live updates if i change the lib code. So i haven't packed in .tar file or anything. – gmemario Jan 19 '18 at 13:04

4 Answers4

0

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
Léo R.
  • 2,620
  • 1
  • 10
  • 22
  • 1
    Problem is with npm install is that if i update the local code of the lib it won't reflect my changes. – gmemario Jan 19 '18 at 13:05
0

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

Samy Sammour
  • 2,298
  • 2
  • 31
  • 66
  • 2
    Problem is with npm install is that if i update the local code of the lib it won't reflect my changes. – gmemario Jan 19 '18 at 13:13
  • What do you mean exactly? You can control this by adding the ^ to the version "@angular/common": "^4.0.0" and it will update it till the version 4.1.0. If that what you mean. Besides, if you want to update the package, just add the new version within the command and it will update the package.json as well! – Samy Sammour Jan 19 '18 at 13:16
  • No, i want to update the lib code locally, on my machine and want it to reflect in the project i'm using. I'm not talking about lib version. – gmemario Jan 19 '18 at 13:17
  • Will in that case the command will not help, because it will install new files each time you fire it. But, why do you need to edit the source code of the lib? I suggest that you override it. I dealt with this lib before, and I created my own overload but did not edit the source code of the lib! – Samy Sammour Jan 19 '18 at 13:20
  • 2
    That's not the point, the point is to have a library and change it on the fly and see the changes reflected on the project. – gmemario Jan 19 '18 at 13:21
  • Well, I don't understand why overriding the methods won't help in your case. But any way you can install the package using the command up there and edit the code in your node_modules, no problem with that! and it will be on the fly, But each time you will reinstall the node_module, you will lose your changes! – Samy Sammour Jan 19 '18 at 13:27
  • If you have the lib as JS, you can include it either in HTML head section as normal, or in angular-cli.json under "apps" -> "scripts" – Samy Sammour Jan 19 '18 at 13:31
0

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.

alienriver49
  • 682
  • 12
  • 18
0

While you can create multiple projects (e.g. 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 e.g. "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 e.g:

    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 e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"

  • npm i

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

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

  • ng serve

Aleksi
  • 520
  • 4
  • 10