No npm link Support?

[matt328]

Is there any reason why the build seems to be structured to require the use of npm pack and then npm install .tgz in client applications? This makes developing libraries pretty cumbersome as compared to the npm link method.

[robisim74]

You can use link, if you want. It doesn't need a support. In my experience, link does not simulate well the installation of the package like pack, for example if the test application is built with webpack or rollup.

[matt328]

Using npm link results in this extremely unhelpful error:

Unexpected value '[object Object]' imported by the module 'AppModule'

If I use npm pack in the library, then npm install <file>.tgz it works fine. I'm still a little in the dark about how npm pack fixes that, but I think I agree with you for the most part that npm link does not seem to be applicable here.

I had worked with a few libraries and client applications using ES6 and AngularJS (1.x). It was really simple to npm link on each end, compile the library with babel, and if the client was watching for changes, it would pick them up, rebuild and reload the app. So I was trying to replicate that workflow.

It seems like with the move to Angular (2.x) and TypeScript the npm link workflow isn't quite as smooth as it used to be, due to the added build complexities on each the library and clients.

[robisim74]

I see. As I said, I have given up using npm link in Angular projects: I wasted a lot of time looking for the right configuration of the client, because the Angular configuration changes constantly. If you search angular 2 npm link doesn't work on Google, you will find a lot of issues about that.
If I may suggest, forget AngularJS to work with Angular 2+.

[FortinFred]

I've been using npm link without issues. This is what I'm doing.
1- checkout my library code
2- In the root folder of the librairie, I rename the my-library.ts file to index.ts
3- run npm link on the root folder of my library
4-delete the node_modules folder because it might create conflicts with ng serve.
5- checkout myapp project and cd ./myapp
6- npm link mylibrary
7- npm install to get other dependencies
8- ng serve

Ng serve should watch both myapp and mylibrary changes.

Im using angular 4

Edit: Some have told me that this no longer works in Angular 5. I haven't tested it myself. Let us know if you have.

[oskarols]

Sort of related to this, I thought I'd chime in with an issue regarding npm link and testing packages created with this as a template.
When one uses ng-cli in combination with a locally build package that has been npm linked, the build process in ng-cli will pull in two versions of all of the angular-packages. So e.g. the application has one HttpClient and if the library package imports it it gets another HttpClient. This causes very subtle and hard to catch bugs.
I think perhaps some disclaimer regarding this would be very helpful.

Interestingly this happens even if one does npm link inside the /dist folder. And even if one deleted the node_modules-folder inside the /dist-folder (which is created when one does npm link).

Edit: Ah, this is actually related to what @FortinFred described in "4-"

[robisim74]

As I said, this kind of problems are non related to this starter (or to other starters), but to the host apps.

You can find a lot of issues and the current status in the official repositories (or on StackOverflow). About angular-cli, these are a couple of (latest) examples: angular/angular-cli#8677, angular/angular-cli#8117

This starter suggests using other methods and not npm link (which has never worked with angular 2+, if not continuously changing configurations to the host apps). Then, if you find out something to make the npm link work permanently and if you need to change something in this starter to do it, it will be done.

[DanielKucal]

To npm link my library I do the following steps:

1. From library root directory cd dist
2. npm link
3. From project directory npm link library-name
4. It creates link /../project/node_modules/library-name -> /usr/local/lib/node_modules/library-name -> /../library-name/dist and works.

[malytskyy]

Just for the sake of completeness, for the error:

Unexpected value '[object Object]' imported by the module 'AppModule'

for me starting with npm start -- --preserve-symlinks did work without any additional tricks.

[robisim74]

Closed due to the #72