angular-cli: Component library local development with npm link error: "Please add a @NgModule annotation"
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.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 3
- Comments: 15 (3 by maintainers)
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 thepaths
setting as follows: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 mytsconfig.app.json
but in development I still get an@NgModule
annotation error.Adding
paths
didn’t work for me. I removed linked library’snode_modules
and that is a pain but fixes the issue (actually I just needed to removenode_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.
deleting the node_modules folder from linking library solved the error for me