angular-cli: Error loading npm linked custom library with aot

It seems like this is a issue caused by Typescript and not by Angular CLI. Typescript has problems resolving dependencies when yarn link or npm link is used, as you can see here #11916 and here #6496. This problem could be solved with Typescript 2.1 (read more here).

For now, thanks to this post #1858 I found a good workaround, which doesn’t affect the actual code of the library, as it is the case with an empty .forRoot(). Furthermore, you don’t have to delete node_modules anymore. Just add a paths property with all angular dependencies to the tsconfig file of the Angular CLI project, where you include your library with yarn link or npm link.

Here is my full tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "paths": {
      "@angular/common": ["../node_modules/@angular/common"],
      "@angular/compiler": ["../node_modules/@angular/compiler"],
      "@angular/core": ["../node_modules/@angular/core"],
      "@angular/forms": ["../node_modules/@angular/forms"],
      "@angular/platform-browser": ["../node_modules/@angular/platform-browser"],
      "@angular/platform-browser-dynamic": ["../node_modules/@angular/platform-browser-dynamic"],
      "@angular/router": ["../node_modules/@angular/router"],
      "@angular/http": ["../node_modules/@angular/http"]
    }
  }
}

@SebastianSchenk perhaps worth noting: Your solution (which resolved this issue for me - a million thanks) can be rewritten as:

paths: { "@angular/*": ["../node_modules/@angular/*"] }

This paths: { “@angular/“: [”…/node_modules/@angular/”] } workaround didn’t work for me. Please help 😦

@jppellerin I had the same issue, removing node_modules from the feature module fixed it. Thanks for sharing! 👍

@SebastianSchenk I was having a very similar issue with a feature module I am building under it’s own dependency. With you’re hypothesis, I removed my node_modules directory from my feature module before linking it. After that, everything worked like a charm.

I’m getting a bunch of errors in my feature module since none of it’s dependencies are present… but that more or less add to an issue with duplication in the node_modules folder.

I have the same problem getting this error. This error is thrown when I try to import a module coming outside my angular-cli root. E.g. import {TestModule} from ‘…/…/…/…<angular-cli root>/…/…/Private/test-share/src/app/test/test.module’;

Doesn’t matter if I use the source .ts file or the compiled version. Also happens when linking with yarn link.

Hi,

Anybody is albe to explain what is the real cause? I have added that path mapping and it resolves my problem. But I think this is not really a solution as more workaround.

When I create new project using ng new XXXX, simulate identical setup All is fine and I dont have a issue. just for my existing project.

@msusur thank your for the example. Using .forRoot helps as a workaround to avoid the error. However, it also helped me to find the root of the problem. I just cloned the lib from github and linked it with yarn link to my project. After that, I imported the module and added it to the imports array of my AppModule without using .forRoot. Everything worked, no errors. After installing the dependencies of the lib, the error was thrown. Now I had to use .forRoot to make to error disappear.

To sum it up. The error occurs only when the lib also contains node_modules. I think it has something to do with @angular/* being a in both node_modules.

I edited the title and added the FAQ label to make it easier for people having the same problem to find this.

So maybe it’s a VS Code thing or npm thing, I don’t know, but somehow the file paths to our symlink’ed modules had their direct paths added (…/…/…/patient/node_modules/*). We spent quite awhile trying to hunt down this issue, and apparently an automated process re-wrote the file paths in app.module.ts.

SHOULD BE:

import { BrowserModule } 		from '@angular/platform-browser';
import { NgModule } 			from '@angular/core';
import { RouterModule, Routes } 	from '@angular/router';
import { HttpClientModule } 		from '@angular/common/http';
import { BrowserAnimationsModule }	from '@angular/platform-browser/animations';
import { FlexLayoutModule } 		from '@angular/flex-layout';
import { FormsModule }			from '@angular/forms';

OVERWRITTEN FILE PATHS:

import { BrowserModule } 		from '../../../patient/node_modules/@angular/platform-browser';
import { NgModule } 			from '../../../patient/node_modules/@angular/core';
import { RouterModule, Routes } 	from '../../../patient/node_modules/@angular/router';
import { HttpClientModule } 		from '../../../patient/node_modules/@angular/common/http';
import { BrowserAnimationsModule }	from '../../../patient/node_modules/@angular/platform-browser/animations';
import { FlexLayoutModule } 		from '../../../patient/node_modules/@angular/flex-layout';
import { FormsModule }			from '../../../patient/node_modules/@angular/forms';

I’ve encountered this error when having a dependency installed from the local file directory. NPM5 creates a symlink which doesn’t seem to want to play nice with the AOT compiler. I solved it by downgrading to NPM3 with npm install -g npm@3 which will by default install the dependency simulating an install from NPM, and use the package.json and .npmignore files. Alternatively, you may want to try something like the npm package npm install-local https://www.npmjs.com/package/install-local.

Hopefully, this helps someone else down the road.