"Error: No provider for Overlay!"
"Error: No provider for Overlay!"
在我使用 Angular CLI 1.0.0-beta.11-webpack.9-1 构建的 Angular 2.0.0-rc.7 + Angular Material 2.0.0-alpha.8-1 应用程序中，从 rc.5+alpha.7-4 升级后出现以下错误（通过 1.0.0-beta.11-webpack.8 NG CLI):
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);
这是我在 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 月）：
OVERLAY_PROVIDERS 现已弃用。改为使用 OverlayModule
import { OverlayModule } from '@angular/cdk/overlay';
@NgModule({
imports: [
OverlayModule
],
declarations: [...],
providers: [...],
bootstrap: [...]
})
MdTooltipModule.forRoot() 也应该可以解决您的问题，因为它还包括 providers: [OVERLAY_PROVIDERS].
来自source:
export class MdTooltipModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: MdTooltipModule,
providers: OVERLAY_PROVIDERS,
};
}
}
您应该执行 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：官方 material2 文档已更新，您也可以查看一下 https://material.angular.io/guide/getting-started
UPDATE2：在最新的 material2 (from 2.0.0-beta.2 and up) 中不再需要使用 MaterialModule.forRoot() 只需使用 MaterialModule 即可。
The use of Module forRoot has been deprecated and will be removed in
the next release. Instead, just simply import MaterialModule directly:
@NgModule({
imports: [
...
MaterialModule,
...
]
...
});
UPFATE3: 从版本 2.0.0-beta.8 angular material 取决于 @angular/cdk 所以你也需要 npm install 。
我通过导入自己的 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],
...
});
对于 @angular/material 版本 6 及更高版本：在根模块中导入 OverlayModule（例如在 app.module.ts 中）。在惰性加载模块中导入不起作用！详情：https://github.com/angular/material2/issues/10820#issuecomment-386733368
在我使用 Angular CLI 1.0.0-beta.11-webpack.9-1 构建的 Angular 2.0.0-rc.7 + Angular Material 2.0.0-alpha.8-1 应用程序中，从 rc.5+alpha.7-4 升级后出现以下错误（通过 1.0.0-beta.11-webpack.8 NG CLI):
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);
这是我在 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 月）：
OVERLAY_PROVIDERS 现已弃用。改为使用 OverlayModule
import { OverlayModule } from '@angular/cdk/overlay';
@NgModule({
imports: [
OverlayModule
],
declarations: [...],
providers: [...],
bootstrap: [...]
})
MdTooltipModule.forRoot() 也应该可以解决您的问题，因为它还包括 providers: [OVERLAY_PROVIDERS].
来自source:
export class MdTooltipModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: MdTooltipModule,
providers: OVERLAY_PROVIDERS,
};
}
}
您应该执行 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：官方 material2 文档已更新，您也可以查看一下 https://material.angular.io/guide/getting-started
UPDATE2：在最新的 material2 (from 2.0.0-beta.2 and up) 中不再需要使用 MaterialModule.forRoot() 只需使用 MaterialModule 即可。
The use of Module forRoot has been deprecated and will be removed in the next release. Instead, just simply import MaterialModule directly:
@NgModule({
imports: [
...
MaterialModule,
...
]
...
});
UPFATE3: 从版本 2.0.0-beta.8 angular material 取决于 @angular/cdk 所以你也需要 npm install 。
我通过导入自己的 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],
...
});
对于 @angular/material 版本 6 及更高版本：在根模块中导入 OverlayModule（例如在 app.module.ts 中）。在惰性加载模块中导入不起作用！详情：https://github.com/angular/material2/issues/10820#issuecomment-386733368