Solvedangular cli Error loading npm linked custom library with aot

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Mac OSX, El Capitan

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.24
node: 6.9.2
os: darwin x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

From a really fresh angular cli project.

Only adding in app.module.ts :

import { MessageModule } from 'my_lib';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule, 
    MessageModule.forRoot() // <-- include here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding one of the component in app.component.html
<my-message type="error">This is an error message</my-message>

And running
ng build --aot

The log given by the failure.

Normally this include a stack trace and some more information.

chunk    {0} main.bundle.js, main.bundle.map (main) 1.48 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 1.77 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 1.06 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /Users/admin/dev/web-library/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in /Users/admin/dev/web-library/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in /Users/admin/dev/web-library/node_modules/@angular/core/src/di/opaque_token.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/admin/dev/web-library/ng24/src'
 @ ./src/main.ts 4:0-74
 @ multi main

ERROR in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
Module not found: Error: Can't resolve '/Users/admin/dev/web-library/ng24/src/$$_gendir' in '/Users/admin/dev/web-library/ng24/node_modules/@angular/core/src/linker'
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js 69:15-36 85:15-102
 @ ./~/@angular/core/src/linker.js
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi main

Mention any other details that might be useful.

My message module declare and exports the message component, with inlined css/html.

It's Exported with a forRoot :

export class MessageModule {
  public static forRoot(): ModuleWithProviders {
    return {ngModule: MessageModule, providers: []};
  }
}

my_lib is generated with ngc, with a .metadata.json near each d.ts.
With following tsconfig parameters :

...
    "target": "es5",
    "module": "es2015",
...
  "angularCompilerOptions": {
    "skipTemplateCodegen": true
  }

Thanks! We'll be in touch soon.

32 Answers

✔️Accepted Answer

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"]
    }
  }
}

Other Answers:

@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.

More Issues: