Ng2-Smart-table not working, returns 404 not found error and system.js error

Question

I am trying to implement the ng2-smarttable in my Angular2 project and returns me the following errors in the console,

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

I tried running a command "npm install" by deleting the ng2-smart-table , but then it returns the same error.

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

The Error message I get when I use 'ng2-smart-table': { main: 'bundles/table.umd.js', defaultExtension: 'js' },

My "app.module.ts" file is as shown below:

rzelek rzelek · Accepted Answer · 2017-06-06T08:51:17

You cannot use ng2-smart-table like this. The ng2-smart-table release target is not ES5, but ES5. SystemJS knows that the index.js is in ES6 (and will not run in many browsers by default) and tries to transpile it using traceur to ES5. Although, there is bundled ES5 file which can be loaded by SystemJS. It is located in ng2-smart-table/bundles/table.umd.js. I am not very familiar with SystemJS, but you may try this:

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

For the future, please remember that traceur problems in SystemJS usually means that you need to point bundled ES5 library file instead of, for example, index.js.

P.S.: This would not be a problem with angular-cli.

Ng2-Smart-table not working, returns 404 not found error and system.js error

1 Answers