zone.jsのAngular2問題

Question

私はこのrepoからログイン認証サービスを実装しようとしています。

私はfolders helpers, services, modelsとguardsを私のappフォルダにコピーしました。その後私は私のlogincomponentとhtmlを変更しました。最後に、app.moduleを変更しました。

これはapp.module.tsです：

import { NgModule }      from '@angular/core'; 
import { BrowserModule }    from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent }     from './app.component'; 
import { Ng2BootstrapModule }   from 'ng2-bootstrap/ng2-bootstrap'; 
import { NAV_DROPDOWN_DIRECTIVES }  from './shared/nav-dropdown.directive'; 

import { ChartsModule }     from 'ng2-charts/ng2-charts'; 
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive'; 
import { AsideToggleDirective }   from './shared/aside.directive'; 
import { BreadcrumbsComponent }   from './shared/breadcrumb.component'; 
import { routing }      from './app.routing'; 

//Layouts 
import { FullLayoutComponent }   from './layouts/full-layout.component'; 
import { SimpleLayoutComponent }  from './layouts/simple-layout.component'; 

//Main view 
import { DashboardComponent }   from './dashboard/dashboard.component'; 

//Components 
import { ButtonsComponent }    from './components/buttons.component'; 
import { CardsComponent }    from './components/cards.component'; 
import { FormsComponent }    from './components/forms.component'; 
import { SocialButtonsComponent }  from './components/social-buttons.component'; 
import { SwitchesComponent }   from './components/switches.component'; 
import { TablesComponent }    from './components/tables.component'; 

//Icons 
import { FontAwesomeComponent }   from './icons/font-awesome.component'; 
import { SimpleLineIconsComponent }  from './icons/simple-line-icons.component'; 

//Widgets 
import { WidgetsComponent }    from './widgets/widgets.component'; 

//Charts 
import { ChartsComponent }    from './charts/charts.component'; 

//Pages 
import { p404Component }    from './pages/404.component'; 
import { p500Component }    from './pages/500.component'; 
import { LoginComponent }    from './pages/login.component'; 
import { RegisterComponent }   from './pages/register.component'; 

// used to create fake backend 
import { fakeBackendProvider } from './_helpers/index'; 
import { MockBackend, MockConnection } from '@angular/http/testing'; 
import { BaseRequestOptions } from '@angular/http'; 

import { AuthGuard } from './_guards/index'; 
import { AuthenticationService, UserService } from './_services/index'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    routing, 
    Ng2BootstrapModule, 
    ChartsModule, 
    HttpModule, 
    routing 
    ], 
    declarations: [ 
    AppComponent, 
    FullLayoutComponent, 
    SimpleLayoutComponent, 
    DashboardComponent, 
    ButtonsComponent, 
    CardsComponent, 
    FormsComponent, 
    SocialButtonsComponent, 
    SwitchesComponent, 
    TablesComponent, 
    FontAwesomeComponent, 
    SimpleLineIconsComponent, 
    WidgetsComponent, 
    ChartsComponent, 
    p404Component, 
    p500Component, 
    LoginComponent, 
    RegisterComponent, 
    NAV_DROPDOWN_DIRECTIVES, 
    BreadcrumbsComponent, 
    SIDEBAR_TOGGLE_DIRECTIVES, 
    AsideToggleDirective 
    ], 
    providers: [ 
     AuthGuard, 
     AuthenticationService, 
     UserService, 

     // providers used to create fake backend 
     fakeBackendProvider, 
     MockBackend, 
     BaseRequestOptions 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

私はサンプルapplicattionをテストし、それがうまく働いたが、私は私のプロジェクトに移行しようとしています。

私はそれは、バージョン問題になると考えていたが、zone.jsとsystemjsとpackages.jsonが、私はそれらを格下げし、問題が同じ行に固執：

zone.js:203 Error: (SystemJS) Unexpected token <(…)

したい場合は、hereからそれをテストすることができます。

Answer 1

systemjs.config.jsが変更され、問題が解決されました。

/** 
* System configuration for Angular 2 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      // other libraries 
      'rxjs':      'npm:rxjs', 
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
      'moment':      'npm:moment/moment.js', 
      'ng2-charts':     'npm:ng2-charts' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'angular2-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      }, 
      'ng2-charts': { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this);