For a while now, I've been facing a challenge when working on an Angular project that utilizes npm link with a library that has its own node modules folder. Each project needs its own set of node modules because they both have their own components and the consumer will need to import the library project module.
Let's say I have a ConsumerProject linked to a LibraryProject. Here's what I run in the command line: In the root directory of LibraryProject
npm link
In the root directory of ConsumerProject
npm link library-project
Both projects have the same 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"
}
The ConsumerProject imports the LibraryModule from the LibraryProject. When I run ng serve in the ConsumerProject, I encounter 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 resolves this error, but upon loading the page, I get the following error: Uncaught Error: Unexpected value 'LibraryModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
I did some research on this issue and found that if the installed angular/cli package is version 1.2.7 or below, you can add the following code to your tsconfig.json file to run the project successfully:
"path": {
"@angular/*": [
"../node_modules/@angular/*"
]
}
This assumes that your baseUrl is in your src directory. However, using this with cli 1.3.0 does not solve the problem anymore. As a temporary solution, I've been deleting the node modules folder in my library until I need it. But ideally, there should be a proper fix for the issue instead of constantly uninstalling and reinstalling the node modules folder.