npm link doesn't work with 1.5.4 version #8677

gios · 2017-11-29T13:53:30Z

Versions

npm 5.5.1
node 8.9.0
angular 5.0.1
angular-cli 1.5.4
Windows 10

Repro steps

Generate project using ng new some-project
Create module and link @scope/mymodule
Compile module using ngc
Link module npm link
Link module to project cd some-project && npm link @scope/mymodule
Start project ng serve

Observed behavior

Error: StaticInjectorError[NgZone]: 
  StaticInjectorError[NgZone]: 
    NullInjectorError: No provider for NgZone!
    at _NullInjector.get (core.js:924)
    at resolveToken (core.js:1212)
    at tryResolveToken (core.js:1154)
    at StaticInjector.get (core.js:1025)
    at resolveToken (core.js:1212)
    at tryResolveToken (core.js:1154)
    at StaticInjector.get (core.js:1025)
    at resolveNgModuleDep (core.js:10586)
    at _createClass (core.js:10631)
    at _createProviderInstance$1 (core.js:10597)

Desired behavior

The module is linked to project, errors are missing.

Mention any other details that might be useful (optional)

If I delete my @angular folder from a linked module, the application runs as expected. I wrote console.log on each @angular/core file (project and library, @angular/core/esm5/core.js) and revealed that project(some-project) used first @angular/core module while library(@scope/mymodule) used it's own @angular/core not root folder(node_modules) which is placed in the project directory.

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

jackjoy · 2017-11-29T14:34:49Z

If i am not wrong,should use "--preserve-symlink".This seems to be node v8/npm v5 issue,but not with node v6/npm v3.

gios · 2017-11-29T14:39:22Z

@jackjoy Unfortunately --preserve-symlink doesn't fix this issue.

jackjoy · 2017-11-29T14:56:25Z

Maybe my fault,try "--preserve-symlinks".

gios · 2017-11-29T16:21:37Z

I was trying to run ng serve with --preserve-symlinks but it couldn't help.

Error: StaticInjectorError[NgZone]:
StaticInjectorError[NgZone]:
NullInjectorError: No provider for NgZone!
at _NullInjector.get (core.js:924)
at resolveToken (core.js:1212)
at tryResolveToken (core.js:1154)
at StaticInjector.get (core.js:1025)
at resolveToken (core.js:1212)
at tryResolveToken (core.js:1154)
at StaticInjector.get (core.js:1025)
at resolveNgModuleDep (core.js:10586)
at _createClass (core.js:10631)
at _createProviderInstance$1 (core.js:10597)

MurhafSousli · 2017-11-29T16:45:22Z

@jackjoy's answer fixed it for me

gios · 2017-11-29T17:51:02Z

@jackjoy Can you share with me tsconfig.json, src/tsconfig.app.json from your angular-cli project and tsconfig.json from your module, please.

jackjoy · 2017-11-30T01:15:16Z

@gios my tsconfig.json and tsconfig.app.json just created by angular-cli and not modified.
tsconfig.json:

tsconfig.app.json:

My project has a dependency in such format:
"@xxx/a-b-c": "file:../xyz/dist"

which created as : npm install -S ..\xyz\dist , not same as you use npm link,but looks like simliar.
After i upgrade from nodejs v6/npm v3 to nodejs v8.9/npm v5.5, i got a the StaticInjectorError:

ng build without --preserve-symlinks:

ng build with --preserve-symlinks:

jackjoy · 2017-11-30T01:22:02Z

The cause of StaticInjectorError is that webpack duplicate code in different chunks.

gios · 2017-11-30T08:59:31Z

Have you ever tried to reproduce this issue with custom local library compiled with ngc and linked to your project, I have the same configuration but I can't link module to my application because of the same symptoms that you mentioned before

jackjoy · 2017-11-30T10:18:42Z

The above xyz\dist is just a local lib build with ngc,so for dev and debug easy,i just use a file location to reference it.Just as you use npm link.

filipesilva · 2017-11-30T10:57:58Z

Have you had a look at https://github.com/angular/angular-cli/wiki/stories-linked-library? There's more to using a linked library than just running npm link. You have to setup peer dependencies correctly as well, and ensure you're targetting JS files and no TS files.

gios · 2017-11-30T11:37:00Z

I use the standard approach to building angular modules I have 5 modules which is built by ngc compiler (also I have index.ts file which is compiled by ngc too with exports) and I link these modules into my main application like npm link @myscope/mymodule which contains 5 angular modules.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": true,
    "removeComments": false,
    "noImplicitAny": false,
    "noStrictGenericChecks": true,
    "lib": [
      "dom",
      "es2015",
      "es2016",
      "es2017"
    ],
    "baseUrl": ".",
    "paths": {
      "@angular/*": ["node_modules/@angular/*"]
    }
  },
  "files": [
    "index.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit": false
  }
}

build process (also I transform templates and styles to inline)

  let cmd = os.platform() === "win32" ?
    "node_modules\\.bin\\ngc -p tsconfig-aot.json" :
    "./node_modules/.bin/ngc -p tsconfig-aot.json";

  exec(cmd, function (err, stdout, stderr) {
    console.error(stdout);
    console.error(stderr);
    cb(err);
  })

index.ts

export { MyService } from "./dist/services/my.service";
export { MyModule } from "./dist/my.module";
export { MyComponent } from "./dist/services/my.component"
export * from "./dist/services/models";

peerDependencies

  "main": "index.js",
  "dependencies": {
    "@angular/animations": "^5.0.1",
    "@angular/platform-server": "^5.0.1",
    "angular2-select": "^1.0.0-beta.3",
    "lodash": "^4.17.4",
    "ngx-bootstrap": "^2.0.0-beta.8"
  },
  "peerDependencies": {
    "@angular/common": "^5.0.1",
    "@angular/compiler": "^5.0.1",
    "@angular/compiler-cli": "^5.0.1",
    "@angular/core": "^5.0.1",
    "@angular/forms": "^5.0.1",
    "@angular/http": "^5.0.1",
    "@angular/platform-browser": "^5.0.1",
    "@angular/platform-browser-dynamic": "^5.0.1",
    "@angular/router": "^5.0.1"
  },
"devDependencies": {
    "@angular/common": "^5.0.1",
    "@angular/compiler": "^5.0.1",
    "@angular/compiler-cli": "^5.0.1",
    "@angular/core": "^5.0.1",
    "@angular/forms": "^5.0.1",
    "@angular/http": "^5.0.1",
    "@angular/platform-browser": "^5.0.1",
    "@angular/platform-browser-dynamic": "^5.0.1",
    "@angular/router": "^5.0.1",
    "@compodoc/compodoc": "^1.0.4",
    "@types/jasmine": "^2.8.1",
    "@types/lodash": "^4.14.80",
    "@types/node": "^8.0.52",
    "angular-router-loader": "^0.6.0",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.3.0",
    "codelyzer": "^2.0.0",
    "cross-env": "^5.1.1",
    "css-loader": "^0.28.7",
    "css-to-string-loader": "^0.1.3",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-inline-ng2-template": "^4.0.0",
    "gulp-tslint": "^7.1.0",
    "html-loader": "^0.5.1",
    "istanbul-instrumenter-loader": "^3.0.0",
    "jasmine-core": "^2.8.0",
    "json-loader": "^0.5.7",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.6",
    "node-sass": "^4.6.1",
    "null-loader": "^0.1.1",
    "protractor": "^5.2.0",
    "rxjs": "^5.5.2",
    "sass-loader": "^6.0.6",
    "tslint": "^4.4.2",
    "typescript": "2.4.2",
    "webpack": "^3.8.1",
    "zone.js": "^0.7.6"
  }

benjamin-wilson · 2017-11-30T19:22:57Z

I have the same type of issue, going from 1.2.8 to 1.3.0 broke it for me, if I delete @angular folder in linked npm directory, it works as expected.

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [ "node", "jasmine" ],
    "lib": [
      "es2016",
      "dom"
    ],
    "paths": {
      "@angular/*": [ "../node_modules/@angular/*" ],
      "rxjs/*": [ "../node_modules/rxjs/*" ]
    }
  }
}

Edit: Seems to be related and fixed by #8117

filipesilva · 2017-12-07T16:23:43Z

Closing in favor of #8117. It seems to generally be the same problem.

angular-automatic-lock-bot · 2019-09-07T17:41:51Z

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

gios mentioned this issue Nov 29, 2017

npm link exist node_modules error #8381

Closed

filipesilva self-assigned this Nov 30, 2017

filipesilva added the needs: more info Reporter must clarify the issue label Nov 30, 2017

robisim74 mentioned this issue Dec 4, 2017

No npm link Support? robisim74/angular-library-starter#2

Closed

filipesilva closed this as completed Dec 7, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

npm link doesn't work with 1.5.4 version #8677

npm link doesn't work with 1.5.4 version #8677

gios commented Nov 29, 2017

jackjoy commented Nov 29, 2017

gios commented Nov 29, 2017

jackjoy commented Nov 29, 2017

gios commented Nov 29, 2017 •

edited

Loading

MurhafSousli commented Nov 29, 2017 •

edited

Loading

gios commented Nov 29, 2017

jackjoy commented Nov 30, 2017

jackjoy commented Nov 30, 2017 •

edited

Loading

gios commented Nov 30, 2017

jackjoy commented Nov 30, 2017

filipesilva commented Nov 30, 2017

gios commented Nov 30, 2017 •

edited

Loading

benjamin-wilson commented Nov 30, 2017 •

edited

Loading

filipesilva commented Dec 7, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

npm link doesn't work with 1.5.4 version #8677

npm link doesn't work with 1.5.4 version #8677

Comments

gios commented Nov 29, 2017

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

jackjoy commented Nov 29, 2017

gios commented Nov 29, 2017

jackjoy commented Nov 29, 2017

gios commented Nov 29, 2017 • edited Loading

MurhafSousli commented Nov 29, 2017 • edited Loading

gios commented Nov 29, 2017

jackjoy commented Nov 30, 2017

jackjoy commented Nov 30, 2017 • edited Loading

gios commented Nov 30, 2017

jackjoy commented Nov 30, 2017

filipesilva commented Nov 30, 2017

gios commented Nov 30, 2017 • edited Loading

benjamin-wilson commented Nov 30, 2017 • edited Loading

filipesilva commented Dec 7, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

gios commented Nov 29, 2017 •

edited

Loading

MurhafSousli commented Nov 29, 2017 •

edited

Loading

jackjoy commented Nov 30, 2017 •

edited

Loading

gios commented Nov 30, 2017 •

edited

Loading

benjamin-wilson commented Nov 30, 2017 •

edited

Loading