"Błąd: brak dostawcy dla nakładki!"

Question

W mojej aplikacji Angular 2.0.0-rc.7 + Angular Material 2.0.0-alpha.8-1 zbudowany z Angular CLI 1.0.0-beta.11-webpack.9-1, pojawia się następujący błąd po aktualizacji z rc.5 + alpha.7-4 (przez 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 

moich package.json uzależnień są:

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

i

"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 jest:

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

i oto moja @NgModule definicja w app.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 { 

} 

jakieś pomysły co w tym wszystkim chodzi?

Answer 1

udało mi się wyeliminować ten błąd, dodając to do app.module.js:

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

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

Answer 2

MdTooltipModule.forRoot() należy również rozwiązać problem ponieważ obejmuje również providers: [OVERLAY_PROVIDERS].

To z source:

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

Answer 3

Należy zrobić MaterialModule.forRoot() (patrz Update2), który powinien rozwiązać problem.

FYI To jest konfiguracja bazowa maerial2:

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

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

Zobacz więcej szczegółów tutaj http://iterity.io/2016/10/01/angular/getting-started-with-angular-material-2/

UPDATE1: Oficjalna doc Materiał2 jest aktualizowany, więc może spojrzeć na to, jak dobrze https://material.angular.io/guide/getting-started

UPDATE2: W najnowszym material2 (from 2.0.0-beta.2 and up) nie trzeba używać MaterialModule.forRoot(), zamiast tego po prostu użyj zamiast tego 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: Począwszy od wersji 2.0.0-beta.8 kątowej materiału zależy od @angular/cdk więc trzeba zainstalować npm że dobrze.

Answer 4

I rozwiązać ten problem poprzez importowanie własną MaterialModule, który wygląda mniej więcej tak

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

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

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

do pliku spec, tak jak

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