Tuesday, 6 June 2017

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

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)

enter image description here

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



via Mohammed Junaid

No comments:

Post a Comment