"Lỗi: Không có nhà cung cấp cho Lớp phủ!"

Question

Trong ứng dụng Angular 2.0.0-rc.7 + Angular Material 2.0.0-alpha.8-1 tôi xây dựng với Angular CLI 1.0.0-beta.11-webpack.9-1, tôi nhận được lỗi sau khi nâng cấp từ rc.5 + alpha.7-4 (thông qua 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 phụ thuộc của tôi là:

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

và

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

My main.ts là:

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); 

và đây là định nghĩa của tôi trong @NgModuleapp.module.ts:

@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 { 

} 

Bất cứ ý tưởng gì này là tất cả về?

Answer 1

tôi quản lý để loại bỏ lỗi này bằng cách bổ sung này để app.module.js:

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

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

Answer 2

MdTooltipModule.forRoot() cũng nên giải quyết vấn đề của bạn vì nó cũng bao gồm providers: [OVERLAY_PROVIDERS].

Đây là từ source:

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

Answer 3

Bạn nên làm MaterialModule.forRoot() (xem UPDATE2) mà nên khắc phục vấn đề.

FYI Đó là thiết lập cơ sở maerial2:

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

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

Xem thêm chi tiết tại đây http://iterity.io/2016/10/01/angular/getting-started-with-angular-material-2/

UPDATE1: Các material2 doc chính thức đã được cập nhật, do đó bạn có thể tìm trong này cũng https://material.angular.io/guide/getting-started

UPDATE2: Trong mới nhất material2 (from 2.0.0-beta.2 and up) không cần sử dụng MaterialModule.forRoot() nữa, chỉ cần sử dụng MaterialModule thay thế.

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: Bắt đầu từ phiên bản 2.0.0-beta.8 liệu góc phụ thuộc vào @angular/cdk vì vậy bạn cần phải cài đặt NPM đó là tốt.

Answer 4

tôi giải quyết vấn đề này bằng cách nhập MaterialModule của riêng tôi, mà trông giống như sau

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

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

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

vào file spec, như vậy

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