angular-cli: 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.

About this issue

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

Commits related to this issue

Update compiler_host.ts Fix for #3875 The problem: duplication of symlinked source files (npm linked sources) in CompilerHost's stats. The solution: resolve these paths before of all Gift of king... — committed to jdavidls/angular-cli by jdavidls 7 years ago
Reproduction of https://github.com/angular/angular-cli/issues/3875 — committed to Bbbrinks/angular-cli-issue-3875 by deleted user 7 years ago

Most upvoted comments

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

gios on Nov 28, 2017

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

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/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?

rudzikdawid on Nov 26, 2017

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

https://github.com/OasisDigital/many-to-many-angular

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

https://github.com/OasisDigital/many-to-many-angular/blob/master/application/admin/tsconfig.json#L12

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

kylecordes on Apr 8, 2017

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 : https://github.com/nimaen/lerna-ngcli 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": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "baseUrl": ".",
    "paths": {
      "@angular/core": [
        "node_modules/@angular/core"
      ]
    }
  },
  "include": [
    "src"
  ]
}

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 tsconfig.app.json override rules as follow :

{
  "extends": "../tsconfig.json",
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

nimaen on Apr 8, 2017

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.)

kylecordes on Apr 2, 2017

@filipesilva

Made a reproduction repo: https://github.com/sterfpaul/angular-cli-issue-3875.

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

Bbbrinks on Feb 2, 2017