No provider for Router! Angular CLI 1.3.2 #25

ghost · 2017-09-06T09:46:27Z

I have just created a new empty project using the current Angular CLI (1.3.2) and the current angular-application-insights (2.3.1) and get a "No provider for Router!" error.

zone.js:661 Unhandled Promise rejection: No provider for Router! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for Router!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9481)
    at _createClass (core.es5.js:9524)
    at _createProviderInstance$1 (core.es5.js:9492)
    at initNgModule (core.es5.js:9446) Error: No provider for Router!
    at injectionError (http://localhost:4200/vendor.bundle.js:47653:90)
    at noProviderError (http://localhost:4200/vendor.bundle.js:47691:12)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:49133:19)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:49172:25)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:49104:25)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:48973:21)
    at resolveNgModuleDep (http://localhost:4200/vendor.bundle.js:55965:25)
    at _createClass (http://localhost:4200/vendor.bundle.js:56008:65)
    at _createProviderInstance$1 (http://localhost:4200/vendor.bundle.js:55976:26)
    at initNgModule (http://localhost:4200/vendor.bundle.js:55930:13)

npm list --depth=0

+-- @angular/animations@4.3.6
+-- @angular/cli@1.3.2
+-- @angular/common@4.3.6
+-- @angular/compiler@4.3.6
+-- @angular/compiler-cli@4.3.6
+-- @angular/core@4.3.6
+-- @angular/forms@4.3.6
+-- @angular/http@4.3.6
+-- @angular/language-service@4.3.6
+-- @angular/platform-browser@4.3.6
+-- @angular/platform-browser-dynamic@4.3.6
+-- @angular/router@4.3.6
+-- @markpieszak/ng-application-insights@2.3.1
+-- @types/jasmine@2.5.54
+-- @types/jasminewd2@2.0.3
+-- @types/node@6.0.88
+-- codelyzer@3.1.2
+-- core-js@2.5.1
+-- jasmine-core@2.6.4
+-- jasmine-spec-reporter@4.1.1
+-- karma@1.7.1
+-- karma-chrome-launcher@2.1.1
+-- karma-cli@1.0.1
+-- karma-coverage-istanbul-reporter@1.3.0
+-- karma-jasmine@1.1.0
+-- karma-jasmine-html-reporter@0.2.2
+-- protractor@5.1.2
+-- rxjs@5.4.3
+-- ts-node@3.2.2
+-- tslint@5.3.2
+-- typescript@2.3.4
`-- zone.js@0.8.17

package.json

{
  "name": "ngcli",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@markpieszak/ng-application-insights": "^2.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "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.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

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

MarkPieszak · 2017-09-06T13:41:15Z

Hey Chris that's strange, is it a completely untouched CLI project ? I'll have to give this a shot, not sure why that would come up.

ghost · 2017-09-06T13:45:49Z

Hi Mark

Thank you for replying so quickly. Yes it's completely untouched. I noticed it after upgrading a large project and have now managed to get it working by pinning to an older version of angular (4.3.1).

I'm using npm 5.3.0 if that matters. Going to try upgrading to latest now.

dfederm · 2017-09-10T07:36:14Z

I'm also seeing this after upgrading from angular 4.3.5 to 4.4.0-RC.0.

It feels like it has something to do with one or both of these versioning oddities in my package-lock.json

The first is that @angular/compiler-cli@4.4.0-RC.0 seems to depend on @angular/tsc-wrapped@4.3.6. I've reported that issue in angular/angular#19129.

    "@angular/compiler-cli": {
      "version": "4.4.0-RC.0",
      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.0-RC.0.tgz",
      "integrity": "sha1-0trwhngqKAIQBVoiH2DRYrT+Yno=",
      "requires": {
        "@angular/tsc-wrapped": "4.3.6",
        "minimist": "1.2.0",
        "reflect-metadata": "0.1.10"
      },
      "dependencies": {
        "@angular/tsc-wrapped": {
          "version": "4.3.6",
          "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.3.6.tgz",
          "integrity": "sha1-GqZuCrLEeZpK0UtnXhOVOqX81DY=",
          "requires": {
            "tsickle": "0.21.6"
          }
        }
      }
    },

The second is that @markpieszak/ng-application-insights's dependency on @angular/router@^4.0.0 seems to resolve to @angular/router@4.3.6 despite the fact that ^4.0.0 should resolve to 4.4.0-RC.0, especially since that's the version I've listed in my package.json.

    "@markpieszak/ng-application-insights": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/@markpieszak/ng-application-insights/-/ng-application-insights-2.3.1.tgz",
      "integrity": "sha512-gEvQJ1KYfkwH+N5lMykmXfKoHCtvZvQ2TpV4Sy+ATikVUQedjoTnW3yqYLResKbB+lR4TnDpugebIlbnvbjZBw==",
      "requires": {
        "@angular/router": "4.3.6",
        "@markpieszak/ng-application-insights": "2.3.1",
        "@types/applicationinsights-js": "1.0.4",
        "applicationinsights-js": "1.0.12",
        "rxjs": "5.4.3",
        "typescript": "2.5.2"
      },
      "dependencies": {
        "@angular/router": {
          "version": "4.3.6",
          "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.3.6.tgz",
          "integrity": "sha1-ZAM+20/NoIoyPnUztKGCDA8o0TA=",
          "requires": {
            "tslib": "1.7.1"
          }
        }
      }
    },

@chrisfoster78 can you check your package-lock.json and see if you're seeing something similar? Yours seemed to resolve to 4.3.6 though for all your angular packages though, so I'm not sure if your version mismatches would match mine (if that's even the problem).

dfederm · 2017-09-10T08:20:46Z

I just tried the following combinations:

angular	ng-application-insights	Does it work?
4.3.5	2.3.0	Yes
4.3.5	2.3.1	Yes
4.3.6	2.3.0	No
4.3.6	2.3.1	Yes
4.4.0-RC.0	2.3.0	No
4.4.0-RC.0	2.3.1	No

It looks like any time ng-application-insights ends up with a @angular/router in its dependencies section instead of just the requires section in the package-lock.json, it does not work. The difference seems that dependencies create a nested node_modules structure underneath the package while otherwise it just uses the one from the root, and I suspect it does that based on whether the package version matches the one in the root, but I still don't know why npm is resolving the dependency the way it is.

And then since ng-application-insights uses a different version, I guess somehow the classes are seen as different and thus ng-application-insights's is not registered when the RouterModule is imported.

All that being said, I don't know what the best path forward is.

dfederm · 2017-09-10T08:35:25Z

I figured out the resolution question. I basically just needed to learn semver better.

Even though angular 4.4.0-RC.0 is listed as the latest, from semver's perspective it's a prerelease package. And because it's prerelease, ^4.0.0 won't resolve to it since it isn't prerelease.

So now the question becomes what's the correct way for ng-application-insights to reference @angular/router without trying to pull in its own if the versions aren't exactly right.

PS. Sorry for the comment spam. I feel thinking I'm going to go to bed but then end up investigating further :)

MarkPieszak · 2017-09-10T15:02:50Z

@dfederm Not a problem David, thanks for the research! I believe we need to set it as a peerDependency as opposed to a regular one, and that may solve the issue. Or we might need an OR for the version ^4.0.0 || 4.4.0-rc.0, rc0 might have been accidentally pushed out publically, since only full versions should be available, that should really only of been there if you installed via @next. Bizarre!

dfederm · 2017-09-10T15:40:19Z

You're right, it does seem weird that a prerelease would be marked as @latest.

Here are some examples of what other libraries I use happen to be doing, sorted by how popular the library is (assuming that popular libs do it "the right way"):

@ng-bootstrap/ng-bootstrap - Lists @angular/core, @angular/common, and @angular/forms as 4.0.3 in peerDependencies and the rest in devDependencies as 4.0.3.
ng2-charts - Lists @angular/common and @angular/core as ^2.3.0 || >=4.0.0 in peerDependencies and the rest in devDependencies as 2.4.3.
ngx-clipboard - Lists @angular/core, @angular/common, and @angular/platform-browser as >=4.0.0 in peerDependencies and the rest in devDependencies as ^2.3.3.
ng2-adsense - Lists the 4.4.0-RC.0 version in its dependencies - This seems to be the only one that does this but it seems to be a pretty low volume package compared to the others.

So at least based on what other libs are doing, it looks like using a peerDependency as you mentioned is the most common pattern.

Adjust and upgrade dependencies Closes #25 Closes #26

MarkPieszak · 2017-09-10T16:49:28Z

@chrisfoster78 Published version 2.3.2 to npm thanks to @dfederm give it a shot!

ghost · 2017-09-10T20:06:59Z

@MarkPieszak, @dfederm Thanks for your time and sorry I've not been much help.

I've just tried another new project and got the following error:

ERROR in C:/checkouts/ngcli/node_modules/@markpieszak/ng-application-insights/dist/src/app-insight.service.d.ts (4,23): Cannot find na
mespace 'Microsoft'.
ERROR in C:/checkouts/ngcli/node_modules/@markpieszak/ng-application-insights/dist/src/app-insight.service.d.ts (5,51): Cannot find na
mespace 'Microsoft'.
ERROR in C:/checkouts/ngcli/node_modules/@markpieszak/ng-application-insights/dist/src/app-insight.service.d.ts (38,14): Cannot find n
amespace 'Microsoft'.
ERROR in C:/checkouts/ngcli/node_modules/@markpieszak/ng-application-insights/dist/src/app-insight.service.d.ts (71,24): Cannot find n
amespace 'AI'.
ERROR in C:/checkouts/ngcli/node_modules/@markpieszak/ng-application-insights/dist/src/app-insight.service.d.ts (1,1): Cannot find typ
e definition file for 'applicationinsights-js'.

I then tried adding "@types/applicationinsights-js": "1.0.4" and get the same original error (No provider for Router).

I also observed the same dependency on @angular/router 4.3.6 in the package.lock file as @dfederm. But I don't think I was able to get version 2.3.1 working with angular 4.3.6, although could be mistaken.

ghost · 2017-09-10T20:35:17Z

It seems like I have been getting this error in my bare bones project as I simply followed the minimal instructions for setting up and had not added any routes. Everything is fine after adding some routes and more importantly the dependency on the RouterModule. The latest version is missing the typings dependency for applicationinsights from my previous comment.

Thanks for your help

Chris

MarkPieszak · 2017-09-10T20:39:58Z

Yes I think we need the types dependency and such back in peers, applicationinsights-js as well.
https://github.com/MarkPieszak/angular-application-insights/pull/27/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2L28

dfederm · 2017-09-10T22:56:28Z

I think you're right about the types, but it feels weird to have types as a dependency.

Regarding the Router, which seems like a separate issue than these dependency issues, perhaps the Router should be marked as optional in the service's ctor? Just in case the app isn't using routing I guess. Probably rare in practice, but a little more generic.

MarkPieszak · 2017-09-11T01:59:05Z

Published 2.3.3 to at least fix the typing issue, thank you guys for noticing these things! Apologies 👍

MarkPieszak · 2017-09-13T22:19:21Z

Published 2.3.4 and tried, the types dep error is gone, and I didn't see "No provider for Router" so I think we're all set now!

dfederm mentioned this issue Sep 10, 2017

Adjust and upgrade dependencies #27

Merged

MarkPieszak closed this as completed in #27 Sep 10, 2017

MarkPieszak added a commit that referenced this issue Sep 10, 2017

Merge pull request #27 from dfederm/master

ce5d5d4

Adjust and upgrade dependencies Closes #25 Closes #26

MarkPieszak reopened this Sep 10, 2017

MarkPieszak closed this as completed Sep 13, 2017

GFoley83 mentioned this issue May 21, 2018

Dependency on @angular/router breaks compatibility with Ionic #45

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No provider for Router! Angular CLI 1.3.2 #25

No provider for Router! Angular CLI 1.3.2 #25

ghost commented Sep 6, 2017 •

edited by ghost

Loading

MarkPieszak commented Sep 6, 2017

ghost commented Sep 6, 2017 •

edited by ghost

Loading

dfederm commented Sep 10, 2017

dfederm commented Sep 10, 2017

dfederm commented Sep 10, 2017

MarkPieszak commented Sep 10, 2017

dfederm commented Sep 10, 2017 •

edited

Loading

MarkPieszak commented Sep 10, 2017

ghost commented Sep 10, 2017 •

edited by ghost

Loading

ghost commented Sep 10, 2017

MarkPieszak commented Sep 10, 2017

dfederm commented Sep 10, 2017

MarkPieszak commented Sep 11, 2017

MarkPieszak commented Sep 13, 2017

No provider for Router! Angular CLI 1.3.2 #25

No provider for Router! Angular CLI 1.3.2 #25

Comments

ghost commented Sep 6, 2017 • edited by ghost Loading

MarkPieszak commented Sep 6, 2017

ghost commented Sep 6, 2017 • edited by ghost Loading

dfederm commented Sep 10, 2017

dfederm commented Sep 10, 2017

dfederm commented Sep 10, 2017

MarkPieszak commented Sep 10, 2017

dfederm commented Sep 10, 2017 • edited Loading

MarkPieszak commented Sep 10, 2017

ghost commented Sep 10, 2017 • edited by ghost Loading

ghost commented Sep 10, 2017

MarkPieszak commented Sep 10, 2017

dfederm commented Sep 10, 2017

MarkPieszak commented Sep 11, 2017

MarkPieszak commented Sep 13, 2017

ghost commented Sep 6, 2017 •

edited by ghost

Loading

ghost commented Sep 6, 2017 •

edited by ghost

Loading

dfederm commented Sep 10, 2017 •

edited

Loading

ghost commented Sep 10, 2017 •

edited by ghost

Loading