"Error: No provider for Overlay!"

Question

In my Angular 2.0.0-rc.7 + Angular Material 2.0.0-alpha.8-1 application built with Angular CLI 1.0.0-beta.11-webpack.9-1, I get the following error after upgrading from rc.5+alpha.7-4 (via the 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

My package.json dependencies are:

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

and

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

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

and here's my @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 {

}

Any ideas what this is all about?

Solution 1

I managed to eliminate this error by adding this to app.module.js:

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

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

---

Edit (May 2018):

OVERLAY_PROVIDERS is now deprecated. use the OverlayModule instead

import { OverlayModule } from '@angular/cdk/overlay';

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

Solution 2

You should do MaterialModule.forRoot() (see the UPDATE2) that should fix the issue.

FYI That is the base maerial2 setup:

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

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

See more details here http://iterity.io/2016/10/01/angular/getting-started-with-angular-material-2/

UPDATE1: The official material2 doc has being updated so you might look in to this as well https://material.angular.io/guide/getting-started

UPDATE2: In the latest material2 (from 2.0.0-beta.2 and up) no need to use MaterialModule.forRoot() any more just use MaterialModule instead.

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: Starting from version 2.0.0-beta.8 angular material depends on @angular/cdk so you need npm install that as well.

Solution 3

For @angular/material version 6 and beyond: import OverlayModule in your root module (e.g. in app.module.ts). Importing in lazy-loaded module doesn't work! Details: https://github.com/angular/material2/issues/10820#issuecomment-386733368

Solution 4

MdTooltipModule.forRoot() should also solve your problem as it also includes providers: [OVERLAY_PROVIDERS].

This is from source:

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

Solution 5

I solved this issue by importing my own MaterialModule, which looks something like this

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

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

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

into the spec file, like so

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

View more solutions