angular2とng2テーブルのデフォルトの拡張子を指定

Question

私はangular2プロジェクトでng2-tableを使用しようとしています。私はangle2とng2-tableをnpmを使ってインストールしました。私のアプリケーションを実行すると、この404エラーが発生します。

しかし、ファイルが私のプロジェクトに存在します！

サーバーは拡張子のないファイルを探していますが、既定の拡張子を指定する方法はありますか？

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 systemjs.config.jsにいくつかの数行を追加することにより、固定

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

、

/** 
* 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);