angular-cli: angular-cli support npm linked libraries still not working

Please provide us with the following information:


Mac OSX El Capitan


Please run ng --version. If there’s nothing outputted, please run in a Terminal: node --version and paste the result here: ng version angular-cli: 1.0.0-beta.22-1 node: 6.5.0 os: darwin x64

Repro steps.

  • I have a package library (dlabs-web-components) that will be shared with many applications.
  • The package library has package to host a set of styles used by all applications. It works just fine when not using npm link, and it is relatively simple:
// Settings file
@import "partials/variables";

// 3rd Party Libraries
@import "~bootstrap/scss/bootstrap";
@import "~bourbon/app/assets/stylesheets/bourbon"; // Place this AFTER bootstrap to avoid some conflicts

// Global partials
@import "partials/mixins";

// Misc partials
@import "partials/animations";
@import "partials/buttons";
@import "partials/contentFooter";
@import "partials/contentHeader";
@import "partials/layout";
@import "partials/loading";
@import "partials/misc";
@import "partials/nodes";
@import "partials/sideNav";
@import "partials/sparkline";
@import "partials/typography";
  • I hap a trainer app, created an app using angular-cli (dlabs-web-components-app), used to illustrate the packages usage.
  • dlabs-web-components-app has a dependency on dlabs-web-components
  • ng build and ng serve work fine.
  • _ Use npm link to connect dlabs-web-components-app to dlabs-web-components
npm link /Users/silveir/Projects/dlabs/dlabs-web-components/
/usr/local/lib/node_modules/dlabs-web-components -> /Users/silveir/Projects/dlabs/dlabs-web-components
/Users/silveir/Projects/dlabs/dlabs-web-components-app/node_modules/dlabs-web-components -> /usr/local/lib/node_modules/dlabs-web-components -> /Users/silveir/Projects/dlabs/dlabs-web-components
  • Now, although ng build works, ng serve_ fails with the following meessage:
_Uncaught SyntaxError: Unexpected token : _

The log given by the failure.

Normally this include a stack trace and some more information.

Mention any other details that might be useful.

I run into this problem this past late Summer and discovered #1875, decided to wait until it was fixed; upon noticing that it was fixed when I upgraded to angular-cli@1.0.0-beta.24 I decided to give it a whirl. Unfortunately I found the exact same problem. This time, I decided to report it.

Thanks! We’ll be in touch soon.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 8
  • Comments: 22 (3 by maintainers)

Commits related to this issue

Most upvoted comments

I have the same problem but with Angular 5 and angular-cli 1.5.0

i have similar problem with @angular/cli 1.4.9 here

dir structure:

├─ demo //angular-cli app
│  └─ src
└─ src //library source

reproduce steps:

cd angular2gridster
npm link
cd demo
npm link angular2gridster 

falubas after that in demo/node_modules we have linked angular2gridster package but with library’s node_modules which unfortunately contain @angular/core

start demo ng serve --preserve-symlinks affects error:

Uncaught Error: Unexpected value 'GridsterModule'
imported by the module 'AppModule'. Please add a @NgModule annotation.

messy workaround

removing demo/node_modules/angular2gridster/node_modules/@angular/core solves the problem temporary but after that we can’t rebuild library.

path mapping inside demo/src/ also doesn’t help:

"baseUrl": ".",
"paths": {
   "@angular/core": ["../node_modules/@angular/core"]

library dependecies:

"peerDependencies": {
    "@angular/common": "4.4.6",
    "@angular/core": "4.4.6"
  "devDependencies": {
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/compiler-cli": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/language-service": "4.4.6",
    "@types/node": "~6.0.60",
    "codelyzer": "^3.0.1",
    "reflect-metadata": "~0.1.9",
    "rxjs": "^5.5.2",
    "ts-loader": "^2.0.1",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "2.4.2",
    "zone.js": "^0.8.4"

demo dependencies:

"dependencies": {
    "@angular/animations": "4.4.6",
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/router": "4.4.6",
    "core-js": "^2.5.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.4"
  "devDependencies": {
    "@angular/cli": "1.4.9",
    "@angular/compiler-cli": "4.4.6",
    "@angular/language-service": "4.4.6",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "gh-pages": "^1.1.0",
    "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.0.4",
    "tslint": "~5.3.2",
    "typescript": "2.4.2"

any idea?

I have a considerably larger implementation of the same pattern here:

… with a different tsconfig paths setting, to make Rxjs and other things work:

  "paths": {
      "@angular/*": ["../node_modules/@angular/*"],
      "@ngrx/*": ["../node_modules/@ngrx/*"],
      "rxjs/*": ["../node_modules/rxjs/*"]

Short story : I have successfully bootstraped a working example which allow me to consume an angular library in an angular cli based app, and I can serve and build it as well. Please note that no build is required on the lib side, since ng cli is building it for you. In fact, I have not even tried to use the lib compiled version yet.

Long story : you can find it here : My consumer app has the following tsconfig.json :

  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "typeRoots": [
    "lib": [
    "baseUrl": ".",
    "paths": {
      "@angular/core": [
  "include": [

Please look carefully at this tsconfig.json, since I’ve added the include attributes and changed the baseUrl and paths. And you will have to remove the override rules as follow :

  "extends": "../tsconfig.json",
  "exclude": [

This issue, along with #1514, are notably problematic when trying to decompose a large sprawling Angular application into smaller ones. That repro from @sterfpaul is right on. Does anyone know of a possible next step for CLI to get it working for that repro?

(As others have noted on this issue and elsewhere, it’s possible to work around all of this with some file-watch-automatic-copy scripts; but that is messy and yields a poor development experience: extra copies of files, make sure that the right one, etc.)


Made a reproduction repo:

Check it out and npm install and link, then run ng build and you will see the problem with angular-cli and npm link.