angular-cli support npm linked libraries still not working

Please provide us with the following information:

OS?

Mac OSX El Capitan

Versions.

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 :     styles.bundle.map:formatted:1 _

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.

[gios]

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

[rudzikdawid]

i have similar problem with @angular/cli 1.4.9 here https://github.com/swiety85/angular2gridster/tree/137-demo-src-app-gridster

dir structure:

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

reproduce steps:

cd angular2gridster
npm link
cd demo
npm link angular2gridster 

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/tsconfig.app.json 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?