Ng2-Smart table ne fonctionne pas, retourne 404 introuvable erreur et erreur system.js

Question

Je suis en train de mettre en œuvre le NG2-SmartTable dans mon projet Angular2 et me renvoie les erreurs suivantes dans la console,

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

J'ai essayé d'exécuter une commande "npm install" en supprimant la table ng2-smart, mais elle renvoie la même erreur.

**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 { } 

Le message d'erreur que je reçois quand j'utilise 'NG2-tables intelligentes': {principaux: 'faisceaux/table.umd.js', DefaultExtension: 'js'},

Mon fichier « app.module.ts » est comme indiqué ci-dessous:

Answer 1

Vous ne pouvez pas utiliser ng2-smart-table comme ça. La cible de publication ng2-smart-table n'est pas ES5, mais ES5. SystemJS sait que le index.js est en ES6 (et ne fonctionnera pas dans de nombreux navigateurs par défaut) et essaie de le transplanter en utilisant traceur vers ES5. Bien que, il existe un fichier ES5 groupé qui peut être chargé par SystemJS. Il est situé au ng2-smart-table/bundles/table.umd.js. Je ne suis pas très familier avec SystemJS, mais vous pouvez essayer ceci:

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

Pour l'avenir, s'il vous plaît rappelez-vous que traceur problèmes SystemJS signifie généralement que vous devez pointer empaqueté fichier de bibliothèque ES5 au lieu de, par exemple, index.js .

P.S .: Ce ne serait pas un problème avec angular-cli.