错误:ChildrenOutletContexts没有提供者 [英] Error: No provider for ChildrenOutletContexts

问题描述

我不能以任何方式在Angular 5中使用angular/material. 我遵循了简单教程 ，但是每当我在组件HTML中插入一些材料标签时，网页就会变成空白.

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.

使用ng serve

依赖项:

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

控制台窗口错误:

推荐答案

该错误与物料模块完全无关.

在使用<router-outlet>指令之前，需要做两件事:

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

1. 导入RouterModule(或其中的任何版本") 由forRoot或forChildren方法生成)生成到模块中 声明使用该指令的组件.
2. 必须调用RouterModule的forRoot方法.否则，该指令所需的服务将不会初始化.

1. 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.
2. 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 { }

如其他用户所述，您尚未真正配置任何路由，因此不必使用<router-outlet>.

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

这基本上是没有为ChildrenOutletContexts(injectionError)提供程序(已找到通过在Google中搜索错误消息(第1个结果)进行搜索).下一次在提出问题之前先做一些研究.

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.

这篇关于错误:ChildrenOutletContexts没有提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！