npm link doesn't work with 1.5.4 version

[gios]

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.

[jackjoy]

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]

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

[jackjoy]

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

[gios]

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]

@jackjoy's answer fixed it for me

[gios]

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

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

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

[gios]

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]

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]

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]

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