Angular &引用；错误：没有覆盖的提供程序&引用；

在我的

Angular 2.0.0-rc.7

+

Angular Material 2.0.0-alpha.8-1

应用程序中，使用

Angular CLI 1.0.0-beta.11 webpack.9-1

构建，从

rc.5

+

alpha.7-4

（通过

1.0.0-beta.11 webpack.8

NG CLI）升级后，我出现以下错误：

我的

package.json

依赖项是：

  "dependencies": {
    "@angular/common": "2.0.0-rc.7",
    "@angular/compiler": "2.0.0-rc.7",
    "@angular/core": "2.0.0-rc.7",
    "@angular/forms": "2.0.0-rc.7",
    "@angular/http": "2.0.0-rc.7",
    "@angular/platform-browser": "2.0.0-rc.7",
    "@angular/platform-browser-dynamic": "2.0.0-rc.7",
    "@angular/router": "3.0.0-rc.3",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.21",
    "@angular2-material/button": "2.0.0-alpha.8-1",
    "@angular2-material/button-toggle": "2.0.0-alpha.8-1",
    "@angular2-material/card": "2.0.0-alpha.8-1",
    "@angular2-material/checkbox": "2.0.0-alpha.8-1",
    "@angular2-material/core": "2.0.0-alpha.8-1",
    "@angular2-material/grid-list": "2.0.0-alpha.8-1",
    "@angular2-material/icon": "2.0.0-alpha.8-1",
    "@angular2-material/input": "2.0.0-alpha.8-1",
    "@angular2-material/list": "2.0.0-alpha.8-1",
    "@angular2-material/menu": "2.0.0-alpha.8-1",
    "@angular2-material/progress-bar": "2.0.0-alpha.8-1",
    "@angular2-material/progress-circle": "2.0.0-alpha.8-1",
    "@angular2-material/radio": "2.0.0-alpha.8-1",
    "@angular2-material/sidenav": "2.0.0-alpha.8-1",
    "@angular2-material/slide-toggle": "2.0.0-alpha.8-1",
    "@angular2-material/slider": "2.0.0-alpha.8-1",
    "@angular2-material/tabs": "2.0.0-alpha.8-1",
    "@angular2-material/toolbar": "2.0.0-alpha.8-1",
    "@angular2-material/tooltip": "2.0.0-alpha.8-1"
  },

及

我的

main.ts

是：

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

下面是我在

app.module.ts

中的

@NgModule

定义：

@NgModule({
  declarations: [
    AppComponent,
    // other application-specific components...
    PageNotFoundComponent,
  ],
  imports: [
    BrowserModule,
    CommonModule,
    ReactiveFormsModule,
    MdButtonModule,
    // other MD modules...
    MdTooltipModule,
    OverlayModule,
    PortalModule,
    RtlModule,
    routing        // application routing
  ],
  providers : [
    Title,
    MdIconRegistry,
    // set of application-specific providers...
  ],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

---

你知道这是怎么回事吗？

我通过将此添加到app.module.js中，成功地消除了此错误：

import {OVERLAY_PROVIDERS} from "@angular/material";

@NgModule({
  imports: [...
  ],
  declarations: [...],
  providers: [OVERLAY_PROVIDERS],
  bootstrap: [...]
})

---

编辑（2018年5月）： 覆盖\u提供程序现在已不推荐使用。改用OverlyModule

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  imports: [
      OverlayModule
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [...]
})

---

MdTooltipModule.forRoot（）

这是来自：

您应该执行
MaterialModule.forRoot（）
（请参阅更新2）来解决此问题

仅供参考，这是maerial2的基本设置：

import { MaterialModule, MdIconRegistry, } from '@angular/material';

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

请参阅此处的更多详细信息

更新1：官方材料2文档已更新，因此您也可以查看此文档

UPDATE2：在最新版本中，不再需要使用
MaterialModule.forRoot（）
只需使用
MaterialModule

模块forRoot的使用已被弃用，并将在中删除
下一版本。相反，只需直接导入MaterialModule：

UPFATE3:从版本
2.0.0-beta.8开始
角度材料取决于
@angular/cdk
，因此您也需要安装npm。
我通过导入我自己的MaterialModule解决了这个问题，它看起来像这样

import { NgModule } from '@angular/core';

import {
  MdButtonModule,
  MdCardModule,
  ...
} from '@angular/material';

@NgModule({
  imports: [
    MdButtonModule,
    MdCardModule,
    ...
  ],
  exports: [
    MdButtonModule,
    MdCardModule,
    ...
  ]
})
export class MaterialModule {}

进入等级库文件，就像这样

import { MaterialModule } from 'app/material/material.module';
TestBed.configureTestingModule({
      imports: [MaterialModule],
      ...
});

对于
@angular/material
version 6及更高版本：在根模块中导入
OverlyModule
（例如在
app.module.ts
）。在延迟加载的模块中导入不起作用！详细信息：
请显示您的
main.ts
我想您忘记添加覆盖的提供者了。Providers是依赖项列表provider，bootstrapmodule的第二个参数检查您的其他模块，如果您在没有为ITI设置提供程序的情况下插入了依赖项@DanielTran，我没有为
覆盖定义提供程序--
@NgModule
定义，请参阅我更新的问题。但什么是必要的提供者？
import { MaterialModule, MdIconRegistry, } from '@angular/material';

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

@NgModule({
    imports: [
        ...
        MaterialModule,
        ...
    ]
...
});

import { NgModule } from '@angular/core';

import {
  MdButtonModule,
  MdCardModule,
  ...
} from '@angular/material';

@NgModule({
  imports: [
    MdButtonModule,
    MdCardModule,
    ...
  ],
  exports: [
    MdButtonModule,
    MdCardModule,
    ...
  ]
})
export class MaterialModule {}

import { MaterialModule } from 'app/material/material.module';
TestBed.configureTestingModule({
      imports: [MaterialModule],
      ...
});