错误:没有 ChildrenOutletContexts 的提供者

问题描述

我无法以任何方式在 Angular 5 中使用 angular/material.我跟着这个

解决方案

该错误与材质模块完全无关.

在使用指令前需要做两件事:

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

所以基本上，更改以下内容:

@NgModule({声明: [应用组件],进口:[浏览器模块，浏览器动画模块，材料模块，RouterModule.forRoot([])],提供者:[]，引导程序:[AppComponent]})导出类 AppModule { }

正如其他用户所说，您还没有真正配置任何路由，因此没有必要使用 .

这基本上是 没有提供 ChildrenOutletContexts (injectionError) 的提供者(发现它通过在谷歌中搜索错误消息，第一个结果).下次在创建问题之前做一些研究.

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:

解决方案

The error is completely unrelated to the material modules.

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

1. Import the RouterModule (or any of the "versions" of itgenerated by forRoot or forChildren methods) into the modulethat 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 { }

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.

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