Error: No provider for ChildrenOutletContexts

Question

I can not make use of angular/material with Angular 5 in any way. I followed this simple Tutorial, but whenever I insert some material tag in component HTML, the web page gets blank.

Angular CLI does not show any issues when using ng serve

Dependencies:

"dependencies": {
    "@angular/animations": "^5.0.5",
    "@angular/cdk": "^5.0.0-rc.2",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.2",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.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.7.0",
    "typescript": "~2.4.2"
  }

app.component.html:

<button mat-button>My Button</button>

<router-outlet></router-outlet>

material.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material';

@NgModule({
  imports: [MatButtonModule],
  exports: [MatButtonModule],
})
export class MaterialModule { }

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MaterialModule} from './material.module';
import { AppComponent } from './app.component';
import {RouterModule} from '@angular/router';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Console Window Error:

any issue in browser's console window? – micronyks Dec 02 '17 at 09:20 — micronyks, Dec 02 '17 at 09:20
thanks for reminding, question is updated – Yahya Hussein Dec 02 '17 at 09:24 — Yahya Hussein, Dec 02 '17 at 09:24

Jota.Toledo · Accepted Answer · 2018-04-23T12:52:56.247

The error is completely unrelated to the material modules.

Two things need to be done before using the <router-outlet> directive:

Import the RouterModule (or any of the "versions" of it generated by forRoot or forChildren methods) into the module that declares components that use the directive.
The forRoot method of the RouterModule has to be called. Otherwise the services required by the directive wont be initialized.

So basically, change the following:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    RouterModule.forRoot([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

As mentioned by other user, you haven't really configured any routes, so the use of <router-outlet> isn't necessary.

This is basically a dup of No provider for ChildrenOutletContexts (injectionError) (found it by searching the error message in google, 1st result). For a next time do some research before creating a question.

score 3 · Answer 2 · answered Dec 02 '17 at 09:26

3

Problem is not with Angular-material but with RouterModule. Import it and add it into imports array.

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,    
    BrowserAnimationsModule,

    RouterModule,                   //<=======add RouterModule

    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

answered Dec 02 '17 at 09:26

micronyks

54,797
15
112
146

did not work, question is updated – Yahya Hussein Dec 02 '17 at 09:35
Are you having multiple routes seriously or you just use `router-outlet` in html ? – micronyks Dec 02 '17 at 09:41
I am a beginner in Angular, I was just following the demo – Yahya Hussein Dec 02 '17 at 09:45
1

If, as of now, you are not using Routers, would suggest you to get rid of `router-outlet` tag from the HTML. That should resolve the problem. – micronyks Dec 02 '17 at 09:53
yes, thank you, it did – Yahya Hussein Dec 02 '17 at 09:55

Error: No provider for ChildrenOutletContexts

2 Answers2

Linked