web-dev-qa-db-ja.com

「エラー：オーバーレイのプロバイダーがありません！」

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 {

}

これについてのアイデアはありますか？

angularangular-cliangular-material2
17
Jan Nielsen

これを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: [...]
})
38
Piotr Szczepański

問題を修正する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：公式のmaterial2ドキュメントが更新されているので、これも調べてみてください https://material.angular.io/ guide/getting-started

UPDATE2：最新の material2（2.0.0-beta.2以降）MaterialModule.forRoot()もう代わりにMaterialModuleを使用してください。

Module forRootの使用は推奨されておらず、次のリリースで削除される予定です。代わりに、単にMaterialModuleを直接インポートするだけです。

@NgModule({
    imports: [
        ...
        MaterialModule,
        ...
    ]
...
});

UPFATE3：バージョン2.0.0-beta.8から開始angular材料は@angular/cdkに依存するため、npmもインストールする必要があります。

6
kuncevic.dev

ために @angular/materialバージョン6以降：OverlayModuleをルートモジュールにインポートします（例：app.module.ts）。遅延ロードされたモジュールでのインポートは機能しません！詳細： https://github.com/angular/material2/issues/10820#issuecomment-386733368

1
izogfif

MdTooltipModule.forRoot()にはproviders: [OVERLAY_PROVIDERS]も含まれているため、問題も解決するはずです。

これは source からです：

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

この問題を解決するには、次のような独自の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],
      ...
});
0
maia