Question

在使用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}升级后出现以下错误NG CLI）：

1.0.0-beta.11-webpack.8

我的main.bundle.js:44545 Error: No provider for Overlay! at NoProviderError.Error (native) at NoProviderError.BaseError [as constructor] (http://localhost:4200/main.bundle.js:7032:34) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/main.bundle.js:44258:16) at new NoProviderError (http://localhost:4200/main.bundle.js:44289:16) at ReflectiveInjector_._throwOrNull (http://localhost:4200/main.bundle.js:65311:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/main.bundle.js:65339:25) at ReflectiveInjector_._getByKey (http://localhost:4200/main.bundle.js:65302:25) at ReflectiveInjector_.get (http://localhost:4200/main.bundle.js:65111:21) at NgModuleInjector.get (http://localhost:4200/main.bundle.js:45173:52) at ElementInjector.get (http://localhost:4200/main.bundle.js:65475:48)ErrorHandler.handleError @ main.bundle.js:44545 main.bundle.js:44548ERROR CONTEXT:ErrorHandler.handleError @ main.bundle.js:44548依赖项是：

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

我的"devDependencies": { "@types/jasmine": "^2.2.30", "angular-cli": "1.0.0-beta.11-webpack.9-1", "codelyzer": "~0.0.26", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "4.0.5", "ts-node": "1.2.1", "tslint": "3.13.0", "typescript": "2.0.2" }是：

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);中的@NgModule定义：

app.module.ts

任何想法都是关于什么的？

Answer 1

我设法通过将此添加到app.module.js来消除此错误：

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

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

编辑（2018年5月）：

OVERLAY_PROVIDERS现已弃用。请改用OverlayModule

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

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

Answer 2

您应该MaterialModule.forRoot()（请参阅 UPDATE2 ）来解决问题。

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

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

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

在此处查看更多详情http://iterity.io/2016/10/01/angular/getting-started-with-angular-material-2/

UPDATE1 ：官方资料2文档已更新，因此您也可以查看此内容https://material.angular.io/guide/getting-started

UPDATE2 ：在最新的material2 (from 2.0.0-beta.2 and up)中，无需再使用MaterialModule.forRoot()，只需使用MaterialModule。

不推荐使用Module forRoot，并将其删除下一个版本。相反，只需直接导入MaterialModule：

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

UPFATE3：从版本2.0.0-beta.8角度材料开始取决于@angular/cdk，因此您也需要安装npm。

Answer 3

MdTooltipModule.forRoot()也应解决您的问题，因为它还包括providers: [OVERLAY_PROVIDERS]。

这是source：

export class MdTooltipModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MdTooltipModule,
      providers: OVERLAY_PROVIDERS,
    };
  }
}

Answer 4

我通过导入自己的MaterialModule解决了这个问题，看起来像这样

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

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

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

进入spec文件，就像这样

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

Answer 5

对于@angular/material版本6及更高版本：在根模块中导入OverlayModule（例如在app.module.ts中）。在延迟加载的模块中导入不起作用！详情：https://github.com/angular/material2/issues/10820#issuecomment-386733368

“错误：没有覆盖的提供商！”

5 个答案:

编辑（2018年5月）：