Ng2-Smart-table无效，返回404 not found error和system.js错误

Question

我正在尝试在Angular2项目中实现ng2-smarttable，并在控制台中返回以下错误，

GET http://localhost:3000/traceur 404 (Not Found)

我尝试过运行命令＆＃34; npm install＆＃34;通过删除ng2-smart-table，但它返回相同的错误。

 **My System.js file**
   /**
   * System configuration for Angular 2 samples
   * Adjust as necessary for your application needs.
  */
    (function (global) {
  System.config({
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/',
        'underscore': './node_modules/underscore/underscore.js'
    },
    // 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/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',
        'ng2-smart-table': 'npm:ng2-smart-table',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
        /** Path for ng2-file-upload */
        'ng2-file-upload' : 'npm:ng2-file-upload',
        'ng2-drag-drop': 'npm:ng2-drag-drop',
        'ng2-dnd': 'npm:ng2-dnd',
        'underscore': 'npm:underscore'      
    },
    // 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'
        },
        'angular-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  },
  /** Configuration for ng2-file-upload */
  'ng2-file-upload' : { 
    main: './ng2-file-upload.js',
    defaultExtension: 'js'
  },
  'ng2-smart-table':   {main: 'index.js', defaultExtension: 'js' } ,
  'ng2-drag-drop':  { main: '/index.js',  defaultExtension: 'js' },
  'underscore':  { main: '/underscore.js',  defaultExtension: 'js' },
    'ng2-dnd':  { main: '/bundles/index.umd.js',  defaultExtension: 'js' }
    },

  });
})(this);

 My app.module.ts if file is as follows,
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
 import { Ng2DragDropModule } from 'ng2-drag-drop';
 import {DndModule} from 'ng2-dnd';
 import { Ng2SmartTableModule } from 'ng2-smart-table';

 import { AppComponent } from './app.component';
 import { routing } from './app.routing';
 import { AppConfig } from './app.config';

 import { AlertComponent } from './_directives/index';
 import { AuthGuard } from './_guards/index';
 import { AlertService, AuthenticationService, UserService, SchemaService } 
 from 
 './_services/index';
 import { HomeComponent } from './home/index';
 import { LoginComponent } from './login/index';
 import { RegisterComponent } from './register/index';
 import { UploadComponent } from './upload/index';
 import { ReadComponent } from './read/index';
 import { DragComponent } from './drag/index';

  @NgModule({
    imports: [
    BrowserModule,
    DndModule.forRoot(),
    FormsModule,
    HttpModule,
    routing,
    Ng2DragDropModule,
    Ng2SmartTableModule
],
declarations: [
    AppComponent,
    AlertComponent,
    HomeComponent,
    LoginComponent,
    RegisterComponent,
    FileSelectDirective,
    UploadComponent,
    ReadComponent,
    DragComponent
  ],
  providers: [
    AppConfig,
    AuthGuard,
    AlertService,
    AuthenticationService,
    UserService,
    SchemaService
],
bootstrap: [AppComponent]
})

export class AppModule { }

我使用＆＃39; ng2-smart-table＆＃39;：{main：＆＃39; bundles / table.umd.js＆＃39;，defaultExtension：＆＃39时收到的错误消息; JS＆＃39; }，

我的＆＃34; app.module.ts＆＃34;文件如下所示：

Answer 1

您不能像这样使用ng2-smart-table。 ng2-smart-table版本目标不是ES5，而是ES5。 SystemJS知道index.js在ES6中（并且默认情况下不会在许多浏览器中运行）并尝试使用traceur将其转换为ES5。虽然，捆绑的ES5文件可以由SystemJS加载。它位于ng2-smart-table/bundles/table.umd.js。我对SystemJS不是很熟悉，但你可以试试这个：

'ng2-smart-table':   {main: 'bundles/table.umd.js', defaultExtension: 'js' }

将来请注意，SystemJS中的traceur个问题通常意味着您需要指向捆绑的ES5库文件，而不是index.js。

P.S。：这对angular-cli来说不是问题。