Specifying default extensions in angular2 and ng2-table - angularjs

Question

I am trying to use ng2-table in my angular2 project. I installed angular2 and ng2-table using npm, when I run my app I get this 404 errors.
But the files exist in my project!
the server is looking for files with no extension, is there any way to specify default extension?
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms'; // <-- NgModel lives here
import {Ng2TableModule} from "ng2-table";
import { JobsComponent } from './components/jobs/jobs.component';
import { JobsTable } from './components/jobs/jobs.component';
#NgModule({
imports: [
BrowserModule,
FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
Ng2TableModule
],
declarations: [
JobsComponent,
JobsTable
],
bootstrap: [ JobsComponent,JobsTable ]
})
export class AppModule { }
jobs.components.ts
import {Component, OnInit} from '#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 by name'}},
{
title: 'Position',
name: 'position',
sort: false,
filtering: {filterString: '', placeholder: 'Filter by position'}
},
{title: 'Office', className: ['office-header', 'text-success'], name: 'office', sort: 'asc'},
{title: 'Extn.', name: 'ext', sort: '', filtering: {filterString: '', placeholder: 'Filter by 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;
for (let i = 0; i < 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): any {
console.log(data);
}
}

Answer 1

Fixed by adding some few lines to systemjs.config.js,
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the 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 the System loader how to load when no filename and/or no extension
packages: {
......
.....
// this specify default extension for ng2-table
'ng2-table': {
format: 'register', defaultExtension: 'js'
}
}
});
})(this);