web-dev-qa-db-fra.com

Erreur: aucun fournisseur pour ChildrenOutletContexts

Je ne peux en aucune manière utiliser angular/material avec Angular 5 . J'ai suivi ce tutoriel simple , mais chaque fois que j'insère une balise de matériau dans le composant HTML, la page Web devient vide.

La CLI angulaire ne montre aucun problème lors de l’utilisation de ng serve 

Dépendances:

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

Erreur de la fenêtre de la console:

Browser console errors

angularangular-material
7
Yahya Hussein

L'erreur n'a aucun rapport avec les modules de matériel.

Avant d’utiliser la directive <router-outlet>, il faut faire deux choses:

  1. Importez la RouterModule (ou l'une de ses "versions" Générée par les méthodes forRoot ou forChildren) dans le module Qui déclare les composants qui utilisent la directive.
  2. La méthode forRoot de RouterModule doit être appelée. Sinon, les services requis par la directive ne seront pas initialisés.

Donc, fondamentalement, changez ce qui suit:

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

Comme mentionné par un autre utilisateur, vous n'avez pas vraiment configuré d'itinéraires, donc l'utilisation de <router-outlet> n'est pas nécessaire.

Ceci est fondamentalement un dup de Aucun fournisseur pour ChildrenOutletContexts (injectionError) (trouvé en recherchant le message d'erreur dans google, 1er résultat). Pour une prochaine fois, faites des recherches avant de créer une question.

20
Jota.Toledo

Le problème n’est pas avecAngular-materialmais avecRouterModule. Importez-le et ajoutez-le dans le tableau imports.

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

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

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

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