unhandled promise rejection error in angular2 migration into final version

Question

I tried to migrate from Rc5 into final version of angular2. I changed module.ts and system.config.js files,also moved all the directives into @ngModule.But now I get following error ,I don't know where is the source of this error? and how can handle it:

message:(what is in browser web console)

Uncaught (in promise): Error: No ErrorHandler. Is platform module (BrowserModule) included?

stack:

"resolvePromise@http://localhost:3002/node_modules/zone.js/dist/zone.js:429:31scheduleResolveOrReject/<@http://localhost:3002/node_modules/zone.js/dist/zone.js:465:17ZoneDelegate.prototype.invokeTask@http://localhost:3002/node_modules/zone.js/dist/zone.js:236:23Zone.prototype.runTask@http://localhost:3002/node_modules/zone.js/dist/zone.js:136:28drainMicroTaskQueue@http://localhost:3002/node_modules/zone.js/dist/zone.js:368:25ZoneTask/this.invoke@http://localhost:3002/node_modules/zone.js/dist/zone.js:308:25"

In Network,main.js,module.js , and all components are loaded.

this is module.ts:

import { NgModule, ApplicationRef, ModuleWithProviders } from '@angular/core';
// Ahead of Time compile
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
// import { PLATFORM_DIRECTIVES, PLATFORM_PIPES, provide, enableProdMode } from '@angular/core';
import {   enableProdMode } from '@angular/core';
import { MdToolbar } from '@angular2-material/toolbar';
import {MdButtonToggleModule} from '@angular2-material/button-toggle';
import { MdButton, MdAnchor } from '@angular2-material/button';
import {MdButtonModule} from '@angular2-material/button';
import {MdCheckboxModule} from '@angular2-material/checkbox';
import {MdRadioModule} from '@angular2-material/radio';
// import {SELECT_DIRECTIVES} from 'ng2-select/ng2-select';
import {MdSlideToggleModule} from '@angular2-material/slide-toggle';
import {MdSidenavModule} from '@angular2-material/sidenav';
import {MdListModule} from '@angular2-material/list';
import {MdGridListModule} from '@angular2-material/grid-list';
import {MdCardModule} from '@angular2-material/card';
import {
  MdLiveAnnouncer,
  MdRippleModule,
  RtlModule,
  PortalModule,
  OverlayModule
} from '@angular2-material/core';

import {MdIconModule} from '@angular2-material/icon';
import {MdProgressCircleModule} from '@angular2-material/progress-circle';
import { MdCheckbox } from '@angular2-material/checkbox';
import { MdUniqueSelectionDispatcher } from '@angular2-material/radio';
import { MdTab } from '@angular2-material/tabs';
import { MdList } from '@angular2-material/list';
import {MdInput} from '@angular2-material/input';
import { MdMenu } from '@angular2-material/menu';
import {MdProgressBarModule} from '@angular2-material/progress-bar';
import {MdInputModule} from '@angular2-material/input';
import {MdTabsModule} from '@angular2-material/tabs';
import {MdToolbarModule} from '@angular2-material/toolbar';
import {MdTooltipModule} from '@angular2-material/tooltip';
import { MdCoreModule } from '@angular2-material/core';
import {MdRipple} from '@angular2-material/core';
import {MdMenuModule} from '@angular2-material/menu';
import { MdIcon, MdIconRegistry } from '@angular2-material/icon';
import { createTemplateRenderer } from "./lib/directives/template-renderer.directive";
import { TranslateModule, TranslateLoader, TranslateStaticLoader, TranslateService } from 'ng2-translate/ng2-translate';
import { ConfigService } from './lib/services/config.service';
import { AuthenticationService } from './lib/services/authentication.service';
import { FileService } from './lib/services/file.service';
import { ContactsService } from './views/contacts/contacts.service';
import { LogService } from './lib/services/log.service';
import { app_Summary } from './lib/components/app_-summary/app_-summary.component';
import { routing, appRoutingProviders } from './routing';
import { app_App } from './lib/components/app_-app/app_-app.component';
import { app_Select } from "./lib/components/app_-select/app_-select.component";
import { ContactsView } from './views/contacts/contacts';
import { GroupsView } from './views/groups/groups';
import { app__COMPONENTS } from "./lib/components/app_-components.module";
import { app__DIRECTIVES } from "./lib/directives/app_-directives";
import { app__PIPES } from "./lib/pipes/app_-pipes";
import { app_Field } from "./lib/components/app_-field/app_-field.component";
import { app_Title } from './lib/components/app_-title/app_-title.component';
import { app_Tab } from './lib/components/app_-tab/app_-tab.component';
import { XHRBackend } from "@angular/http";
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService } from './lib/services/in-memory-data.service';
import { app_Action } from './lib/components/app_-action/app_-action.component';
import { app_ActionsMenu } from './lib/components/app_-actions-menu/app_-actions-menu.component';
import { app_Pane } from './lib/components/app_-pane/app_-pane.component';
import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from 'ng2-material';
import { MdDialog } from "ng2-material/components/dialog/dialog";
const MATERIAL_MODULES = [
  MdButtonModule,
  MdButtonToggleModule,
  MdCardModule,
  MdCheckboxModule,
  MdGridListModule,
  MdIconModule,
  MdInputModule,
  MdListModule,
  MdMenuModule,
  MdProgressBarModule,
  MdProgressCircleModule,
  MdRadioModule,
  MdRippleModule,
  MdSidenavModule,
  //MdSliderModule,
  MdSlideToggleModule,
  MdTabsModule,
  MdToolbarModule,
  MdTooltipModule,
  OverlayModule,
  PortalModule,
  RtlModule,
];
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    // MATERIAL_MODULES,
    MdButtonModule.forRoot(),
    MdCardModule.forRoot(),
    MdCheckboxModule.forRoot(),
    MdGridListModule.forRoot(),
    MdInputModule.forRoot(),
    MdListModule.forRoot(),
    MdProgressBarModule.forRoot(),
    MdProgressCircleModule.forRoot(),
    MdRippleModule.forRoot(),
    MdSidenavModule.forRoot(),
    MdTabsModule.forRoot(),
    MdToolbarModule.forRoot(),
    PortalModule.forRoot(),
    RtlModule.forRoot(),
    MdButtonToggleModule.forRoot(),
    MdIconModule.forRoot(),
    MdMenuModule.forRoot(),
    MdRadioModule.forRoot(),
    MdSlideToggleModule.forRoot(),
    MdTooltipModule.forRoot(),
    OverlayModule.forRoot(),
    RouterModule,
    routing,
    TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, '/app/i18n', '.json'),
      deps: [Http]
    })
  ],

  exports: [
    MATERIAL_MODULES,
    TranslateModule
  ],

  providers: [
    appRoutingProviders,
    MdLiveAnnouncer,
    TranslateService,
    ConfigService,
    LogService,
    AuthenticationService,
    ContactsService,
    FileService,
  ],

  declarations: [
    app_App,
    app__COMPONENTS,
    app__DIRECTIVES,
    app__PIPES,
    ContactsView,
    GroupsView,
    MdIcon,
    MdButton,
    MdInput,
    MdTab,
    MdList,
    MdCheckbox,
    MdMenu,
    app_Field,
    createTemplateRenderer("item", "index"),
    MdToolbar,
    MdDialog,
    app_Select,
    app_Title,
    app_Tab,
    app_Summary,
    app_Action,
    app_ActionsMenu,
    MdRadioModule,
    app_Pane,
  ],

  entryComponents: [
    App
  ],
  bootstrap: [App]
})

export class MaterialRootModule { }
@NgModule({
  imports: MATERIAL_MODULES,
  exports: MATERIAL_MODULES,
})

export class AppModule{
  static forRoot(): ModuleWithProviders {
    return { ngModule: MaterialRootModule };
  }
}

and this is index.html:

  <head>
  <base href="/">
  <title>MEMS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="app/css/ui-layout.css">
  <link rel="stylesheet" href="node_modules/@angular2-material/core/overlay/overlay.css">
  <link rel="stylesheet" href="node_modules/ng2-material/ng2-material.css">
  <link rel="stylesheet" href="node_modules/ng2-material/font/font.css">
  <link rel="stylesheet" href="node_modules/ng2-select/components/css/ng2-select.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="//cdn.auth0.com/js/lock-8.1.min.js"></script>
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="app/js/base64-arraybuffer.js"></script>
  <script src="app/js/ui.js"></script>
  <script src="systemjs.config.js"></script>
  <script>
    System.import('app/main').catch(function(err){ console.error(err); });
  </script>
</head>
<body>
  <app>Loading ...</app>
</body>
</html>

would you please help me ?

Many thanks.

Answer 1

I had the same error message some time ago. Problem was related to my custom ErrorHandler. Custom ErrorHandler was added in the end of my app.module.ts. You need to move this custom ErrorHandler to the start of this page. I'm using webpack for angular2.

Answer 2

My problem was because of my module.js. I removed ` // constructor(private _appRef: ApplicationRef) { }

  // ngDoBootstrap() {

  //   this._appRef.bootstrap(SeiApp);

  // }

  // static forRoot(): ModuleWithProviders {

  //   return { ngModule: MaterialRootModule };

  // } `