"Fehler: Kein provider für Overlay!"

In meinem Angular 2.0.0-rc.7 + Angular Material 2.0.0-alpha.8-1 Anwendung gebaut, mit Angular CLI 1.0.0-beta.11-webpack.9-1, bekomme ich die folgende Fehlermeldung nach dem Upgrade von rc.5+alpha.7-4 (über die 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

Meine package.json Abhängigkeiten sind:

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

und

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

Meine main.ts ist:

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

und hier ist mein @NgModule definition in 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 {

}

Irgendwelche Ideen, was das alles ist?

bitte zeigen Sie Ihre main.ts
Ich glaube, Sie vergaß hinzuzufügen, Anbieter für Overlay. Anbieter sind in der Liste der Abhängigkeiten Anbieter, der zweite parameter der bootstrapModule
Überprüfen Sie Ihre anderen Module, wenn Sie injizieren eine Abhängigkeit, ohne einen provider für Sie
Es ist wahr, @DanielTran, das ich nicht definiert eine Anbieter für Overlay -- siehe meine aktualisierte Frage mit meinem @NgModule definition. Aber was ist die notwendige provider?

InformationsquelleAutor Jan Nielsen | 2016-09-14

27

Habe ich es geschafft um den Fehler zu beseitigen, indem diese app.module.js:
```
import {OVERLAY_PROVIDERS} from "@angular/material";

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

OVERLAY_PROVIDERS ist jetzt veraltet. verwenden Sie die OverlayModule statt
```
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  imports: [
      OverlayModule
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [...]
})
```
- Herzlich willkommen auf Stack Overflow! Sie können diese Antwort besser von Bearbeiten um zu erklären, wie es funktioniert.
- Arbeitete für mich, danke. Sollte die richtige Antwort.
InformationsquelleAutor Piotr Szczepański
4

Sollten Sie tun MaterialModule.forRoot() (siehe UPDATE2), dass sollte das Problem beheben.

FYI, Das ist die Basis maerial2 setup:
```
import { MaterialModule, MdIconRegistry, } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot()
  ],
  providers: [MdIconRegistry],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
Weitere details finden Sie hier http://iterity.io/2016/10/01/angular/getting-started-with-angular-material-2/

UPDATE1: Die offizielle material2 doc hat aktualisiert, so dass Sie Aussehen könnte, Sie in diesem als auch https://material.angular.io/guide/getting-started

UPDATE2: In der neuesten material2 (von 2.0.0-beta.2) keine Notwendigkeit zu verwenden MaterialModule.forRoot() mehr, benutzen Sie einfach MaterialModule statt.

Den Einsatz von Modul forRoot ist veraltet und wird entfernt werden
die nächste Veröffentlichung. Stattdessen importieren Sie einfach MaterialModule direkt:
```
@NgModule({
    imports: [
        ...
        MaterialModule,
        ...
    ]
...
});
```
UPFATE3: ab version 2.0.0-beta.8 eckig material hängt von @angular/cdk so dass Sie brauchen, npm installieren, dass auch.
- Ja kann das bestätigen, vielen Dank!
InformationsquelleAutor Kuncevič
1

MdTooltipModule.forRoot() sollte auch dein problem lösen, da es auch providers: [OVERLAY_PROVIDERS].

Dies ist aus Quelle:
```
export class MdTooltipModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MdTooltipModule,
      providers: OVERLAY_PROVIDERS,
    };
  }
}
```
- Danke dir, deine Lösung beseitigt mein problem.
InformationsquelleAutor Alex Okrushko

Löste ich dieses Problem durch den Import meiner eigenen MaterialModule, die wie folgt aussieht

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

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

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

in der spec-Datei, wie so

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

InformationsquelleAutor maia

0

Für @angular/material version 6 und darüber hinaus: import OverlayModule in Ihrem Stamm-Modul (z.B. in app.module.ts). Import der Daten in die lazy-loaded-Modul funktioniert nicht! Details: https://github.com/angular/material2/issues/10820#issuecomment-386733368

InformationsquelleAutor izogfif

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Bearbeiten (Mai 2018):