Error: Uncaught (in promise): Error: No provider for ActivatedRoute

Question

I am aware that there are other threads asking the same question - they are closed however and their accepted answer provides no cure for this case.

The overall suggestion is: "Please import RouterModule inside your main module." Well I did! I actually did everything quite the way it is suggested in the github repository and yet it doesn't work at all.

Any suggestions what I am doing wrong?

app.module.ts

@NgModule({
  imports: [
    HttpModule,
    BrowserModule,
    RouterModule.forRoot([
      { path: 'list', component: ListComponent },
      { path: '**', redirectTo: 'list', pathMatch: 'full' }
    ]),
    StoreModule.forRoot(AppReducer, {
      initialState: {
        screens: [],
        logo: { binaryimage: ''},
      }
    }),
    StoreDevtoolsModule.instrument({
      maxAge: 25
    }),
    EffectsModule.forRoot([CommonEffects]),
  ],
  declarations: [
    AppComponent,
    ClockComponent,
    LogoComponent,
    SiteListComponent,
    TermsComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

terms.component.ts

@Component({
  selector: 'terms',
  templateUrl: './terms.component.html',
  styles: ['./terms.component.less']
})
export class TermsComponent implements OnInit {
  public name: string;
  public terms: Observable<Term[]>;

  constructor(
    private route: ActivatedRoute,
    private store: Store<App>
  ) {
    this.terms = store.select('terms');
  }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.store.dispatch(new TermActions.FetchTermList(params.get('name')));
    })
  }
}

package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation for visual studio 2017 & WebApi",
  "scripts": {
    "precompile": "webpack",
    "build": "webpack",
    "start": "webpack-dev-server --hot --inline --port 8237",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "pree2e": "webdriver-manager update",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^4.2.6",
    "@angular/compiler": "^4.2.6",
    "@angular/core": "^4.2.6",
    "@angular/forms": "^4.2.6",
    "@angular/http": "^4.2.6",
    "@angular/platform-browser": "^4.2.6",
    "@angular/platform-browser-dynamic": "^4.2.6",
    "@angular/router": "^4.2.6",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^4.1.1",
    "@ngrx/router-store": "^4.1.1",
    "@ngrx/store": "^4.1.1",
    "@ngrx/store-devtools": "^4.1.1",
    "@ngtools/webpack": "^1.8.3",
    "angular-in-memory-web-api": "^0.2.4",
    "awesome-typescript-loader": "^3.4.0",
    "core-js": "^2.4.1",
    "es5-shim": "^4.5.9",
    "es6-promise": "^4.1.1",
    "es6-shim": "^0.35.3",
    "less": "^2.7.3",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.3",
    "webpack": "^3.8.1",
    "webpack-env": "^0.8.0",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.46",
    "angular2-template-loader": "^0.6.2",
    "canonical-path": "0.0.2",
    "concurrently": "^3.2.0",
    "css-loader": "^0.28.7",
    "dateformat": "^3.0.2",
    "file-loader": "^0.9.0",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "less-loader": "^4.0.5",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "postcss-loader": "^2.0.8",
    "protractor": "~4.0.14",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.4",
    "style-loader": "^0.19.0",
    "to-string-loader": "^1.1.5",
    "tslint": "^3.15.1",
    "typescript": "^2.6.1",
    "uglify": "^0.1.5",
    "uglifyjs-webpack-plugin": "^1.1.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4",
    "webpack-merge": "^4.1.1"
  },
  "repository": {}
}

Answer 1

I finally discovered the solution - yet I am don't understand why it is a problem in the first place!

In one of the many components the router was imported like this:

import { RouterModule, Routes } from '@angular/Router';

However, it must - for reasons I don't understand - be imported like this:

import { RouterModule, Routes } from '@angular/router';

Why is this an issue? It's on a windows machine (case-agnostic file structure) and there was no compile-time or runtime error (except the one stating there is no provider, which is entirely misleading even when looking at the problem retrospectively in my opinion)?