Repository navigation
Component library local development with npm link error: "Please add a @NgModule annotation" #6505
Description
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 linkat the/distfolder 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)
Activity
clydin commentedon May 30, 2017
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.
ernestbofill commentedon May 30, 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
clydin commentedon May 30, 2017
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 thepathssetting as follows:ernestbofill commentedon May 30, 2017
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.
matthewhegarty commentedon Sep 15, 2017
Adding
pathsdidn't work for me. I removed linked library'snode_modulesand 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.
DooMMasteR commentedon Sep 26, 2017
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.jsonbut in development I still get an@NgModuleannotation error.kalyan-1-ans commentedon Oct 17, 2017
deleting the node_modules folder from linking library solved the error for me
endy21osu commentedon Oct 19, 2017
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
matthewhegarty commentedon Oct 20, 2017
@endy21osu Hi Jeff - you can try removing the linked library's
node_modulesdirectory (or just@angular/node_modules) - see above.See also this issue
endy21osu commentedon Oct 20, 2017
Hi Matt,
Thanks for the response. If you are talking about the node_modules folder that might be in the dist folder after running ngc then yes I did delete that. Is there a different one i should be deleting?
matthewhegarty commentedon Oct 20, 2017
It will be the
node_modulesfolder in whatever is the target of your npm linkendy21osu commentedon Oct 20, 2017
yes i did delete it. here is what it looks like
magemello commentedon Oct 25, 2017
@endy21osu, I explained how I fix it here: angular/angular#15763 (comment), I hope it can help you...
mprinc commentedon Nov 9, 2017
Here i tried to elaborate more on the problem: #2154 (comment)
angular-automatic-lock-bot commentedon Sep 7, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.