Unclear "Linked libraries" document - seeking clarification

[supdegrave]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.3.0
node: 8.0.0
os: darwin x64
@angular/animations: 4.3.5
@angular/common: 4.3.5
@angular/compiler: 4.3.5
@angular/core: 4.3.5
@angular/forms: 4.3.5
@angular/http: 4.3.5
@angular/platform-browser: 4.3.5
@angular/platform-browser-dynamic: 4.3.5
@angular/router: 4.3.5
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.5
@angular/language-service: 4.3.5

Repro steps.

This is mostly a documentation bug, I guess.

I'm trying to pull in a shared module from my local filesystem, outside the scope of my main application, and running into the common
Please add a @NgModule annotation. I'm not here asking about that.

I'm trying to follow the guidelines in the Linked Libraries story, but it feels like there's something missing.

After listing peerDependencies and devDependencies in the shared module's package.json, and configuring paths in the main app's tsconfig.app.json, where's the magic? Is there an implied npm install that should happen?

Desired functionality.

Very clear steps in the document, along the following:

1. Configure package.json for the external package library: ...
2. Configure tsconfig.json for the main application: ...
3. <magic, if any>

[supdegrave]

It's also not clear from the document whether the package.json / tsconfig.json changes are intended to be used in conjunction with or in place of npm link.

[mpalourdio]

There's a bug with angular-cli >= 1.3 at the moment #7409

[supdegrave]

@mpalourdio Thanks for the comment, but unfortunately it doesn't get me past my issue.

When I run ng serve --preserve-symlink I still get the error "Please add a @NgModule annotation". I've tried this under the following conditions:

• npm link + instructions from Linked Libraries document
• Only instructions from Linked Libraries document
• Only npm link - no paths addition to tsconfig

Clearly there's something I'm missing. I'm not sure if it is due to unclear / minimal documentation, a lightbulb moment waiting to happen, or...

[tytskyi]

@supdegrave your "library" module should be already AOT compiled. Make sure you do not npm link raw sources.

Library structure should follow spec: https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview

Easiest is to make a library using some 3rd party starters. For example: https://github.com/jvandemo/generator-angular2-library

Then npm link to dist folder in library repo (after library has been bundled).

[supdegrave]

@tytskyi Thanks. Is there any supported way to link (npm link or otherwise) uncompiled TS files from a library into an application? I've found this post on creating an npm-hosted Angular library in Typescript, but would appreciate being able to make changes to the library without a npm publish / npm update round-trip.

[tytskyi]

@supdegrave i don't think so, see https://github.com/angular/angular-cli/wiki/stories-linked-library#the-library-still-needs-to-be-rebuilt-on-every-change. Also you do not need to publish every time you change code, only publish when it's "done".

That's why you want to use npm link - you do changes in the library, it is compiled to its dist folder, then you link that library's dist folder into your application folder.

Edit: i quickly reviewed linked article: not the best scenario, there is a suggestion to rename file manually and no mention on npm link. Please review README.md i linked above, see some details on development scenario here: https://github.com/jvandemo/generator-angular2-library#consuming-your-library-during-development

[supdegrave]

Thanks again, @tytskyi. I'm having a look at that yeoman generator now.

[mpalourdio]

You can link an external .ts module inside an existing application. I do that with my own modules. I manually symlink my module's root inside my application's node_modules. Changes are taken on the fly without any problem

[supdegrave]

@mpalourdio I'd love more details on your exact situation. That sounds like exactly what I'm trying to do, and failing miserably.

[mpalourdio]

You can give it a try : clone this module : https://github.com/mpalourdio/ng-http-loader

Then, in your application, go to nodes_modules, and symlink src/app inside. For example :

cd myapp/node_modules && ln -s ../../ng-http-loader/src/app/ ng-http-loader

Once done, you can import NgHttpLoaderModule in you app and apply changes inside the library.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}