2016-09-23 11 views
1

Rc5에서 angular2의 최종 버전으로 마이그레이션하려고했습니다. module.ts 및 system.config.js 파일을 변경하고 모든 지시문을 @ ngModule.vut로 옮겼습니다. 이제 다음 오류가 발생합니다.이 오류의 원인은 어디인지 모르겠습니까? 그것을 처리 할 수있는 방법 :최종 버전으로의 angular2 마이그레이션에서 처리되지 않은 약속 거부 오류

메시지 :

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

스택 (브라우저 웹 콘솔에서 무엇) :

"[email protected]http://localhost:3002/node_modules/zone.js/dist/zone.js:429:31scheduleResolveOrReject/ <@http://localhost:3002/node_modules/zone.js/dist/zone.js:465:[email protected]://localhost:3002/node_modules/zone.js/dist/zone.js:236:[email protected]://localhost:3002/node_modules/zone.js/dist/zone.js:136:[email protected]://localhost:3002/node_modules/zone.js/dist/zone.js:368:25ZoneTask/[email protected]://localhost:3002/node_modules/zone.js/dist/zone.js:308:25 "

네트워크에서, main.js, module.js 및 모든 구성 요소 로드됩니다.

이 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 }; 
    } 
} 

을하고이 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> 

당신이 좀 도와 주시겠습니까?

감사합니다.

+0

'@ NgModule'과'index.html'을 보여줍니다. – micronyks

+0

내 질문이 업데이트되었습니다. index.html과 module.ts를 추가하십시오. a –

+0

이것은 웹 콘솔에서 볼 수있는 메시지입니다. Error : Uncaught (약속 있음) : Error : No ErrorHandler. 플랫폼 모듈 (BrowserModule)이 포함되어 있습니까? –

답변

1

내 문제는 내 module.js 때문이었습니다. 나는 몇 시간 전에 같은 오류 메시지가 있었다 {}

// ngDoBootstrap() { 

    // this._appRef.bootstrap(SeiApp); 

    // } 

    // static forRoot(): ModuleWithProviders { 

    // return { ngModule: MaterialRootModule }; 

    // } ` 
+0

그 의미는 무엇입니까? 이 문제를 해결하기 위해 모듈을 어떻게 변경 했습니까? –

+0

@VladimirMelekh 내 대답을 확인할 수 있습니다. –

1

: 나는 (ApplicationRef 개인 _appRef)`// 생성자를 제거했습니다. 문제는 내 사용자 정의 ErrorHandler와 관련이 있습니다. 사용자 정의 ErrorHandler가 app.module.ts 끝에 추가되었습니다. 이 사용자 정의 ErrorHandler를이 페이지의 시작 부분으로 이동해야합니다. angular2에 webpack을 사용하고 있습니다.