"Ошибка: нет провайдера для Overlay!"

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

и вот мое @NgModule определение в 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 { 

} 

Любые идеи, что это все?

Answer 1

мне удалось устранить эту ошибку, добавив в app.module.js:

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

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

Answer 2

MdTooltipModule.forRoot() также должны решить вашу проблему, поскольку она также включает в себя providers: [OVERLAY_PROVIDERS].

Это из source:

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

Answer 3

Вы должны сделать MaterialModule.forRoot() (см UPDATE2), который должен решить проблему.

FYI То есть установка базы 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.

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/cdk поэтому вам нужно НПМ установить, что хорошо.

Answer 4

Я решил эту проблему за счет импорта мой собственный 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], 
     ... 
});