にSyntaxError：予期しないトークンは<NG2

Question

私はNG2ブートストラップを使用していますが、私はエラーに直面していますブートストラップ予期しないトークン以下< は、設定ファイルであると私は「NG2-ブートストラップ」を追加しました：「/ NG2-ブートストラップをnode_modules」以下は

System.config.ts

(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/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', 
      'ng2-bootstrap': 'node_modules/ng2-bootstrap' 
     }, 
     // 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' 
      } 
     } 
    }); 
})(this); 

私はAlertModule.forRootを（インポート持つモジュールファイルです）

Module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { Routes,RouterModule} from '@angular/router'; 
import { HttpModule, JsonpModule } from '@angular/http'; 
import { ModuleWithProviders } from '@angular/core'; 
import { AppComponent} from "./app.component"; 
import { EqualValidator } from "./Validation/equal.validator.directive"; 
import { LoginComponent } from "./Components/login.Component"; 
import { HomeComponent } from "./Components/home.component"; 
import { DashBoardComponent } from "./Components/dashBoard.Component"; 
import { FooterComponent } from "./Components/footer.Component"; 
import { NavComponent } from "./Components/nav.Component"; 
import { DashBoardItemComponent } from "./Components/dashBoard.Item.Component"; 
import { MarketComponent } from "./Components/market.Component"; 
import { DatepickerModule, AlertModule } from 'ng2-bootstrap'; 

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'Home/Index', pathMatch: 'full' }, 
    { path: 'DashBoard/Index', children: [ 
           { path: '', component: DashBoardItemComponent}, 
           { path: '', component: DashBoardComponent, outlet: 'dashboard' } 
           ]}, 
    { path: 'Account/Login', children: [ 
           {path: '', component: NavComponent, outlet: 'navbar'}, 
           {path: '', component: LoginComponent}, 
           {path: '', component: FooterComponent, outlet: 'footer'} 
           ]}, 
    { path: 'Home/Index', children: [ 
          {path: '', component: NavComponent, outlet: 'navbar'}, 
          {path: '', component: HomeComponent}, 
          {path: '', component: FooterComponent, outlet: 'footer'} 
          ]}, 
{ 
     path: 'DashBoard/MarketList', 
     children: [ 
      { path: '', component: DashBoardComponent, outlet: 'dashboard' }, 
      { path: '', component: MarketComponent } 
     ] 
    } 
]; 



export const routing = RouterModule.forRoot(appRoutes); 

@NgModule({ 
    imports: [BrowserModule, FormsModule, HttpModule,routing,AlertModule.forRoot()], 
    declarations: [AppComponent, LoginComponent, HomeComponent, DashBoardComponent, EqualValidator,FooterComponent,NavComponent,DashBoardItemComponent,MarketComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

私はあなたのsystemjs.config.jsで

Answer 1

https://valor-software.com/ng2-bootstrap/#/alertsを使用しているソースの行で

'ng2-bootstrap': 'node_modules/ng2-bootstrap' 

を交換

'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.min.js' 

あなただけの間違ったファイルへのパスを与えている

Answer 2

設定これはあなたのsystemJSのプロパティで：

var map = { 
    ... 
    'ng2-bootstrap':    'npm:ng2-bootstrap', 
    }; 

var packages = { 
    ... 
    'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' }, 
    ... 
};