So I've been running into an issue for some time while when trying to develop in an angular project that uses npm link with a library that also contains it's own node modules folder. Both need their own copy of node modules because both will contain their own components and the consumer will need to import the module of the library project.
Say I have I have a ConsumerProject that links into a LibraryProject. I run the following in the command line: At the root of LibraryProject
npm link
At the root of ConsumerProject
npm link library-project
Both contain the same following dependencies/devDependencies:
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
}, "devDependencies": {
"@angular/cli": "1.3.2",
"@angular/compiler-cli": "^4.2.4",
"@angular/language-service": "^4.2.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"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"
}
ConsumerProject will import over the LibraryModule from the LibraryProject. And when I run ng serve inside of ConsumerProject, I get the following errors:
ERROR in Error encountered resolving symbol values statically. Function
calls are not supported. Consider replacing the function or lambda with a
reference to an exported function (position 194:50 in the original .ts
file), resolving symbol NgModule in *path to directory*, resolving symbol
LibraryModule in *path to directory*, resolving symbol LibraryModule in
*path to directory*
Recompiling the code will cause the code to compile and when I load up the page I get the following error: Uncaught Error: Unexpected value 'LibraryModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
I've done a bit of research about the issue, and one thing I found is that if the installed angular/cli package is at version 1.2.7 or below, you can successfully run your project by adding this code to your tsconfig.json file:
"path": {
"@angular/*": [
"../node_modules/@angular/*"
]
}
This is assuming your baseUrl is at your src directory. However, using this at cli 1.3.0 no longer solves the problem. I've been able to temporarily bypass the issue by simply deleting the node modules folder within my library until I need to use it. However I was hoping there would be some kind of actual solution to the issue itself instead of having to uninstall and reinstall the node modules folder itself.
