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.
@NgModule
andindex.html
. – micronyks