Skip to content

Commit

Permalink
docs: add linked library story
Browse files Browse the repository at this point in the history
Blocked on angular#6276.
  • Loading branch information
filipesilva committed May 12, 2017
1 parent 0de9cb6 commit fede0f4
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 1 deletion.
1 change: 1 addition & 0 deletions docs/documentation/stories.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,4 @@
- [Code Coverage](stories/code-coverage)
- [Application Environments](stories/application-environments)
- [Autoprefixer Configuration](stories/autoprefixer)
- [Linked Library](stories/linked-library)
62 changes: 62 additions & 0 deletions docs/documentation/stories/linked-library.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
# Linked libraries

While working on a library, it is common to use [npm link](https://docs.npmjs.com/cli/link) to
avoid reinstalling the library on every build.

While this is very useful there are a few caveats to keep in mind.

## The library needs to be AOT compatible

Angular CLI does static analysis even without the `--aot` flag in order to detect lazy-loade routes.
If your library is not AOT compatible, you will likely get a static analysis error.

## The library still needs to be rebuilt on every change

Angular libraries are usually built using TypeScript and thus require to be built before they
are published.
For simple cases, a linked library might work even without a build step, but this is the exception
rather than the norm.

If a library is not being built using its own build step, then it is being compiled by the
Angular CLI build system and there is no guarantee that it will be correctly built.
Even if it works on development it might not work when deployed.

When linking a library remember to have your build step running in watch mode and the library's
`package.json` pointing at the correct entry points (e.g. 'main' should point at a `.js` file, not
a `.ts` file).

## Use TypesScript path mapping for Peer Dependencies

Angular libraries should list all `@angular/*` dependencies as
[Peer Dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/).
This insures that, when modules ask for Angular, they all get the exact same module.
If a library lists `@angular/core` in `dependencies` instead of `peerDependencies` then it might
get a *different* Angular module instead, which will cause your application to break.

While developing a library, you'll need to have all of your peer dependencies also installed
via `devDependencies` - otherwise you could not compile.
A linked library will then have it's own set of Angular libraries that it is using for building,
located in it's `node_modules` folder.
This can cause problems while building or running your application.

To get around this problem you can use the TypeScript
[path mapping](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping).
With it, you can tell TypeScript that it should load some modules from a specific location.

You should list all the peer dependencies that your library uses in `./tsconfig.json`, pointing
them at the local copy in the apps `node_modules` folder.
This ensures that you all will always load the local copies of the modules your library asks for.

```
{
"compilerOptions": {
// ...
// Note: these paths are relative to `baseUrl` path.
"paths": {
"@angular/*": [
"../node_modules/@angular/*"
]
}
}
}
```
2 changes: 1 addition & 1 deletion packages/@angular/cli/models/webpack-configs/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
devtool: buildOptions.sourcemaps ? 'source-map' : false,
resolve: {
extensions: ['.ts', '.js'],
modules: [nodeModules],
modules: ['node_modules', nodeModules]
},
resolveLoader: {
modules: [nodeModules]
Expand Down

0 comments on commit fede0f4

Please sign in to comment.