angular-cli support npm linked libraries still not working #3875

ghost · 2017-01-06T01:31:51Z

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

The text was updated successfully, but these errors were encountered:

sumigoma · 2017-01-06T05:16:47Z

Same as #3760, still not resolved. It does seem like an angular issue.

Fix for angular#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 kings

anand-ma · 2017-01-06T15:44:28Z

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 · 2017-01-06T16:01:38Z

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 · 2017-01-24T14:41:45Z

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 · 2017-02-02T10:44:56Z

@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 · 2017-02-06T13:37:21Z

Any update on this?

Bbbrinks · 2017-02-06T15:16:02Z

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 · 2017-02-10T11:25:09Z

@sterfpaul the problem you describe is a different one than this issue proper, see #1514 (comment).

Bbbrinks · 2017-02-13T08:00:48Z

@filipesilva It seems that it's a problem that is solvable with webpack configuration and this wasn't a problem in the <beta.21 versions. And as angular cli is generating/handling the webpack configuration this does seem like a angular cli/webpack issue not a npm issue.

kylecordes · 2017-04-02T14:21:11Z

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 · 2017-04-08T14:11:30Z

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 · 2017-04-08T15:21:41Z

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 · 2017-04-08T15:53:26Z

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 · 2017-04-08T15:55:29Z

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 · 2017-04-08T15:57:48Z

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 · 2017-04-08T16:04:38Z

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

kylecordes · 2017-04-08T16:16:43Z

@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 · 2017-04-08T16:40:40Z

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 · 2017-05-22T15:12:05Z

#6292 documents how to use linked libraries, but relies on #6276 which is only present on 1.1.0-rc.0 and up.

rudzikdawid · 2017-11-26T00:55:02Z

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?

gios · 2017-11-28T16:38:07Z

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

angular-automatic-lock-bot · 2021-06-03T08:36:26Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

ghost changed the title ~~angular-cli~~ angular-cli support npm linked libraries still not working Jan 6, 2017

jdavidls mentioned this issue Jan 20, 2017

Update compiler_host.ts (Fix for #3847) #3877

Closed

filipesilva added the needs: repro steps We cannot reproduce the issue with the information given label Jan 24, 2017

Bbbrinks pushed a commit to Bbbrinks/angular-cli-issue-3875 that referenced this issue Feb 2, 2017

Reproduction of angular/angular-cli#3875

e5d9f2b

filipesilva mentioned this issue Mar 13, 2017

ng serve failed to serve project after upgrade to angular cli beta.32 #4819

Closed

filipesilva closed this as completed May 22, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 3, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

angular-cli support npm linked libraries still not working #3875

angular-cli support npm linked libraries still not working #3875

ghost commented Jan 6, 2017

Please provide us with the following information:

sumigoma commented Jan 6, 2017

anand-ma commented Jan 6, 2017

ghost commented Jan 6, 2017

filipesilva commented Jan 24, 2017

Bbbrinks commented Feb 2, 2017 •

edited

Loading

Bbbrinks commented Feb 6, 2017

Bbbrinks commented Feb 6, 2017

filipesilva commented Feb 10, 2017

Bbbrinks commented Feb 13, 2017

kylecordes commented Apr 2, 2017

nimaen commented Apr 8, 2017

kylecordes commented Apr 8, 2017 •

edited

Loading

nimaen commented Apr 8, 2017

kylecordes commented Apr 8, 2017

kylecordes commented Apr 8, 2017

nimaen commented Apr 8, 2017

kylecordes commented Apr 8, 2017

nimaen commented Apr 8, 2017

filipesilva commented May 22, 2017

rudzikdawid commented Nov 26, 2017

gios commented Nov 28, 2017 •

edited

Loading

angular-automatic-lock-bot bot commented Jun 3, 2021

angular-cli support npm linked libraries still not working #3875

angular-cli support npm linked libraries still not working #3875

Comments

ghost commented Jan 6, 2017

Please provide us with the following information:

OS?

Versions.

Repro steps.

The log given by the failure.

Mention any other details that might be useful.

sumigoma commented Jan 6, 2017

anand-ma commented Jan 6, 2017

ghost commented Jan 6, 2017

filipesilva commented Jan 24, 2017

Bbbrinks commented Feb 2, 2017 • edited Loading

Bbbrinks commented Feb 6, 2017

Bbbrinks commented Feb 6, 2017

filipesilva commented Feb 10, 2017

Bbbrinks commented Feb 13, 2017

kylecordes commented Apr 2, 2017

nimaen commented Apr 8, 2017

kylecordes commented Apr 8, 2017 • edited Loading

nimaen commented Apr 8, 2017

kylecordes commented Apr 8, 2017

kylecordes commented Apr 8, 2017

nimaen commented Apr 8, 2017

kylecordes commented Apr 8, 2017

nimaen commented Apr 8, 2017

filipesilva commented May 22, 2017

rudzikdawid commented Nov 26, 2017

messy workaround

gios commented Nov 28, 2017 • edited Loading

angular-automatic-lock-bot bot commented Jun 3, 2021

Bbbrinks commented Feb 2, 2017 •

edited

Loading

kylecordes commented Apr 8, 2017 •

edited

Loading

gios commented Nov 28, 2017 •

edited

Loading