Angular-cli: Component library local development with npm link error: "Please add a @NgModule annotation"

Created on 30 May 2017 · 15Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

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

Versions.

@angular/cli: 1.0.6
node: 6.9.5
os: win32 x64
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.6
@angular/compiler-cli: 4.1.3

Repro steps.

Create an empty angular-cli project
Create a new Angular component library with at least one module and one component.
Build the component library with ngc -p ./src/tsconfig.lib.json
Register the component library running npm link at the /dist folder of the library.
From the angular-cli project link to the component library: npm link component-library-package-name
Use the component library (import a module and use a component).
Start the angular-cli project with ng serve.
It compiles but it will fail in the browser with the following error: Unexpected value 'MyModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

The log given by the failure.

Chrome error log:

compiler.es5.js:1540 Uncaught Error: Unexpected value 'MyModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (http://localhost:4200/vendor.bundle.js:29720:34)
    at http://localhost:4200/vendor.bundle.js:42674:44
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/vendor.bundle.js:42657:49)
    at JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:53810:66)
    at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:53769:52)
    at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:53731:23)
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:5731:25)
    at PlatformRef_.bootstrapModule (http://localhost:4200/vendor.bundle.js:5717:21)
    at Object.122 (http://localhost:4200/main.bundle.js:303:124)

Desired functionality.

Mention any other details that might be useful.

investigation bufix

Source

ernestbofill

👍3

Most helpful comment

Your component library setup looks fine.
The app needs some slight adjustment to ensure that the application's Angular libraries are used and not the library's development dependencies. This change will essentially mimic the standard behavior of the Angular peer dependencies in the context of a linked library.
In src/tsconfig.app.json, add the paths setting as follows:

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

clydin on 30 May 2017

👍11 🎉3

All 15 comments

You can find information related to using linked libraries here: https://github.com/angular/angular-cli/wiki/stories-linked-library

If you are still having issues, please let us know and if possible provide a sample library or other repro.

clydin on 30 May 2017

@clydin thanks, I still have issues. I believe my component library follows the guidelines from the link you provided.

I attach a zip file with a sample library and an angular-cli application using it which can be used to reproduce the issue:

npmlinktest.zip

ernestbofill on 30 May 2017

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

clydin on 30 May 2017

👍11 🎉3

Great. That fixes it. I can see now that it was also explained in the guide you provided earlier but I didn't understand it there.

ernestbofill on 30 May 2017

Adding paths didn't work for me. I removed linked library's node_modules and that is a pain but fixes the issue (actually I just needed to remove node_modules/@angular/core). See this thread.

I've followed all of the steps in the guide carefully, but I must be missing something because I always get the error.

matthewhegarty on 15 Sep 2017

👍3

I have the same issue, but only in development, the result of the production compile run works just fine.
"paths": { "@angular/*": ["../node_modules/@angular/*"] } is already set up in my tsconfig.app.json but in development I still get an @NgModule annotation error.

@angular/cli: 1.4.3
node: 6.11.3
os: linux x64
@angular/animations: 4.4.3
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.4.3
@angular/compiler-cli: 4.4.3
@ngtools/webpack: 1.7.1
typescript: 2.3.4

DooMMasteR on 26 Sep 2017

👍6

deleting the node_modules folder from linking library solved the error for me

kalyan-anna on 17 Oct 2017

👍2

I am having the same issue when i try to link a module after running ngc.

The issue goes away if i use "@angular/cli": "1.2.7" but if i use 1.3.0 and up to 1.4.7 i have the issue where i am asked to "Please add a @NgModule annotation." in the console of the browser. any ideas?

node -v
v6.11.3

    "@angular/cli": "1.3.0",
    "@angular/compiler-cli": "^4.3.0",
    "@angular/language-service": "^4.3.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "@types/lodash": "^4.14.68",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"