angularjs - Specifying default extensions in angular2 and ng2-table -

i trying use ng2-table in angular2 project. installed angular2 , ng2-table using npm, when run app 404 errors.

but files exist in project!

the server looking files no extension, there way specify default extension?

app.module.ts

import { ngmodule }      '@angular/core'; import { browsermodule } '@angular/platform-browser'; import { formsmodule }   '@angular/forms'; // <-- ngmodel lives here import {ng2tablemodule} "ng2-table";  import { jobscomponent }  './components/jobs/jobs.component'; import { jobstable }  './components/jobs/jobs.component';  @ngmodule({   imports: [     browsermodule,     formsmodule, // <-- import formsmodule before binding [(ngmodel)]     ng2tablemodule   ],   declarations: [     jobscomponent,     jobstable   ],   bootstrap: [ jobscomponent,jobstable ] }) export class appmodule { } 

jobs.components.ts

import {component, oninit} '@angular/core'; @component({     selector: 'jobs',     templateurl: "./jobs.html" }) export class jobscomponent { }  export class jobstable implements oninit{      public rows:array<any> = [];     public columns:array<any> = [         {title: 'name', name: 'name', filtering: {filterstring: '', placeholder: 'filter name'}},         {             title: 'position',             name: 'position',             sort: false,             filtering: {filterstring: '', placeholder: 'filter position'}         },         {title: 'office', classname: ['office-header', 'text-success'], name: 'office', sort: 'asc'},         {title: 'extn.', name: 'ext', sort: '', filtering: {filterstring: '', placeholder: 'filter extn.'}},         {title: 'start date', classname: 'text-warning', name: 'startdate'},         {title: 'salary ($)', name: 'salary'}     ];     public page:number = 1;     public itemsperpage:number = 10;     public maxsize:number = 5;     public numpages:number = 1;     public length:number = 0;      public config:any = {         paging: true,         sorting: {columns: this.columns},         filtering: {filterstring: ''},         classname: ['table-striped', 'table-bordered']     };      private data:array<any> = null;      public constructor() {         this.length = this.data.length;     }      public ngoninit():void {         this.onchangetable(this.config);     }      public changepage(page:any, data:array<any> = this.data):array<any> {         let start = (page.page - 1) * page.itemsperpage;         let end = page.itemsperpage > -1 ? (start + page.itemsperpage) : data.length;         return data.slice(start, end);     }      public changesort(data:any, config:any):any {         if (!config.sorting) {             return data;         }          let columns = this.config.sorting.columns || [];         let columnname:string = void 0;         let sort:string = void 0;          (let = 0; < columns.length; i++) {             if (columns[i].sort !== '' && columns[i].sort !== false) {                 columnname = columns[i].name;                 sort = columns[i].sort;             }         }          if (!columnname) {             return data;         }          // simple sorting         return data.sort((previous:any, current:any) => {             if (previous[columnname] > current[columnname]) {                 return sort === 'desc' ? -1 : 1;             } else if (previous[columnname] < current[columnname]) {                 return sort === 'asc' ? -1 : 1;             }             return 0;         });     }      public changefilter(data:any, config:any):any {         let filtereddata:array<any> = data;         this.columns.foreach((column:any) => {             if (column.filtering) {                 filtereddata = filtereddata.filter((item:any) => {                     return item[column.name].match(column.filtering.filterstring);                 });             }         });          if (!config.filtering) {             return filtereddata;         }          if (config.filtering.columnname) {             return filtereddata.filter((item:any) =>                 item[config.filtering.columnname].match(this.config.filtering.filterstring));         }          let temparray:array<any> = [];         filtereddata.foreach((item:any) => {             let flag = false;             this.columns.foreach((column:any) => {                 if (item[column.name].tostring().match(this.config.filtering.filterstring)) {                     flag = true;                 }             });             if (flag) {                 temparray.push(item);             }         });         filtereddata = temparray;          return filtereddata;     }      public onchangetable(config:any, page:any = {page: this.page, itemsperpage: this.itemsperpage}):any {         if (config.filtering) {             object.assign(this.config.filtering, config.filtering);         }          if (config.sorting) {             object.assign(this.config.sorting, config.sorting);         }          let filtereddata = this.changefilter(this.data, this.config);         let sorteddata = this.changesort(filtereddata, this.config);         this.rows = page && config.paging ? this.changepage(page, sorteddata) : sorteddata;         this.length = sorteddata.length;     }      public oncellclick(data: any): {         console.log(data);     }   } 

fixed adding few lines systemjs.config.js,

/**  * system configuration angular samples  * adjust necessary application needs.  */ (function (global) {   system.config({     paths: {       // paths serve alias       'npm:': 'node_modules/'     },     // map tells system loader things     map: {       // our app within app folder       'app': 'app',        // angular bundles       '@angular/animations'                 : 'npm:@angular/animations/bundles/animations.umd.js',         'ng2-table'                         : 'npm:ng2-table/ng2-table.js',         'systemjs'                         : 'npm:systemjs/dist/systemjs.js'     },     // packages tells system loader how load when no filename and/or no extension     packages: {      ......        .....       // specify default extension ng2-table       'ng2-table': {           format: 'register', defaultextension: 'js'       }     }   }); })(this);