angular-cli support npm linked libraries still not working

[ghost]

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:
  ````css
  // 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
  bash 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 [email protected] 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.

[sumigoma]

Same as https://github.com/angular/angular-cli/issues/3760, still not resolved. It does seem like an angular issue.

[anand-ma]

I had the same issue. I end doing npm pack to create a tar and then install from tar (npm install ). It worked well!!

[ghost]

I should have added one additional comment regarding of the workaround, which I decided it is better than using npm link. The work around consists of the following:

• branch the package library repo, in my case named DLABS-894
• branch the trainer app, in my case also named DLABS-894
• update the trainer app dependency on the package library to be git+ssh - instead of npm; in my case it went:
  
  
  
  • from "dlabs-web-components": "0.0.3"
  
  
  • to "dlabs-web-components": "git+ssh://[email protected]:Dematiclabs/dlabs-web-components.git#DLABS-894"
  
  
• if any work is required on the package library, the library has to be updated in the trainer app development environment after the package library changes are checked in.
• when work is done on the package library and trainer app, revert the rainer app dependency on the package library to be npm; in my case it went:
  
  
  
  • from: dlabs-web-components": "git+ssh://[email protected]:Dematiclabs/dlabs-web-components.git#DLABS-894"
  
  
  • to: dlabs-web-components": "005"
  
  

Regards
Rodrigo

[filipesilva]

I'm not sure what's happening in your particular example. If you can get me a simple example, for instance a very basic repo that I can clone, link and see the problem, I can investigate.

[Bbbrinks]

@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]

Any update on this?

[Bbbrinks]

Partial workaround for the problem in my repo is to add the following paths configuration to tsconfig.json:

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

Doesn't seem to work for everything. Not for Observable from rxjs for example.

[filipesilva]

@sterfpaul the problem you describe is a different one than this issue proper, see https://github.com/angular/angular-cli/issues/1514#issuecomment-240910842.

[Bbbrinks]

@filipesilva It seems that it's a problem that is solvable with webpack configuration and this wasn't a problem in the

[kylecordes]

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

[nimaen]

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"
  ]
}

[kylecordes]

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/*"]
    },

[nimaen]

I haven't had any problem with RxJS so far.
I suppose that the problem might be linked to decorator metadatas, since I often encounter the makeDecorator error stuff.

[kylecordes]

The RxJS symptom I saw was as follows: import 'rxjs/add/operator/whatever' didn't work, because it brought in a separate copy of RxJS rather than affecting the main one brought in my the main project. The RxJS line in my snippet above avoided that problem.

[kylecordes]

The makeDecorator error happens because (possibly among other reasons) a library grabs a different copy of Angular (from its own copy of node_modules) than the application.

[nimaen]

I would have done the same thing with the symptoms you describe, just find it strange to not have the same error :thinking:
Anyway, it's just a small workaround for now.

[kylecordes]

@nimaen There are many errors and problems and adjustments needed as a program uses more Angular features, that are not relevant for a simple example. I am working on adding more features to my example, more modules, using more parts of the Angular API - hopefully to discover "all" of the adjustments needed for this approach to work on real, complex projects.

[nimaen]

Yes yes, for good. I'll have a look at your contribution for those problems 😉
I am also applying fixes like those in multiple enterprise applications.
I'll come to post further solutions if needed.

[filipesilva]

https://github.com/angular/angular-cli/pull/6292 documents how to use linked libraries, but relies on https://github.com/angular/angular-cli/pull/6276 which is only present on 1.1.0-rc.0 and up.

[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:

├─ 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?

[gios]

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