ng build --prodによりテンプレート解析エラーが発生する

私は新しく、ソート可能なテーブルを表示する必要がある小さなアプリケーションを構築しました。開発モードでAngular-cli開発サーバーですべて正常に動作します（ng serveを使用）。ng build --prodによりテンプレート解析エラーが発生する

私はng2テーブルと角度テーブルライブラリの両方でテーブルを実装しようとしましたが、これはこれらのライブラリのいずれかに関連する問題ではないと思われます。

私は私のステージングサーバー上に展開するためng build --prodを使用してアプリケーションをビルドするときしかし、私は、ブラウザのコンソール内で以下のエラーを受け取る私がアプリケーションにアクセスしようとすると、」

zone.js:461 Unhandled Promise rejection: Template parse errors: 
Can't bind to 'rowsOnPageSet' since it isn't a known property of 'mfBootstrapPaginator'. ("      <td colspan="3"> 
             <mfBootstrapPaginator [ERROR ->][rowsOnPageSet]="[10,25,100]"></mfBootstrapPaginator> 
            </td> 
    "): [email protected]:62 ; Zone: <root> ; Task: Promise.then ; Value: 

Template parse errors:↵Can't bind to 'rowsOnPageSet' since it isn't a known property of 'mfBootstrapPaginator'. ("      <td colspan="3">↵          <mfBootstrapPaginator [ERROR ->][rowsOnPageSet]="[10,25,100]"></mfBootstrapPaginator>↵         </td>↵  "): [email protected]:62"

ように、私は自分のコードを更新しましたそれは、すべての角度2.0.0RC5を使用して実行されている。つまり、それは新しい@NgModuleデコレータを使用するように。あなたが提供することができます

任意のヘルプやアドバイスをいただければ幸いです。私はここで終わりだ。

の多くのおかげ

注：私は一時的にコンポーネントの@Componentデコレータ下ディレクティブとDataTableDirectivesをspecifiying試みたが、これは助けにはなりませんでした。

app.module.ts

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {HttpModule} from '@angular/http'; 
import {DataTableDirectives} from 'angular2-datatable/datatable'; 
import {AppComponent, APP_ROUTER_PROVIDERS, APP_ROUTES} from './'; 
import {MapToIterable} from './utils'; 
import {ServerDataService} from './services'; 
import {HomeComponent, DecoderStatusComponent, ActivityListComponent, PassingsComponent} from './components'; 


@NgModule({ 
    imports: [ 
     APP_ROUTES, 
     BrowserModule, 
     HttpModule 
    ], 
    declarations: [ 
     AppComponent, 
     DecoderStatusComponent, 
     ActivityListComponent, 
     PassingsComponent, 
     HomeComponent, 
     MapToIterable, 
     DataTableDirectives 
    ], 
    providers: [ 
     APP_ROUTER_PROVIDERS, 
     ServerDataService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
}

システム-config.ts

/******************************* 
* User Configuration. 
*******************************/ 

/** Map relative paths to URLs. */ 
const map: any = { 
    'lodash':    'vendor/lodash', 
    'rxjs':     'vendor/rxjs', 
    'angular2-datatable': 'vendor/angular2-datatable', 
    'ng2-bootstrap':  'vendor/ng2-bootstrap', 
    'moment':    'vendor/moment' 
}; 

/** User packages configuration. */ 
const packages: any = { 
    'lodash':    { defaultExtension: 'js', main: 'lodash.js' }, 
    'rxjs':     { defaultExtension: 'js' }, 
    'angular2-datatable': { defaultExtension: 'js' }, 
    'moment':    { format: 'cjs', defaultExtension: 'js' }, 
    'ng2-bootstrap':  { format: 'cjs', defaultExtension: 'js' } 
}; 



/******************************* 
* Everything underneath this line is managed by the CLI. 
*******************************/ 
const barrels: string[] = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/forms', 
    '@angular/http', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 

    // Thirdparty barrels. 


    // App specific barrels. 
    'app', 
    'app/shared', 
    'app/components', 
    'app/model', 
    'app/services', 
    'app/utils' 
    /** @cli-barrel */ 
]; 

const cliSystemConfigPackages: any = {}; 
barrels.forEach((barrelName: string) => { 
    cliSystemConfigPackages[barrelName] = { main: 'index' }; 
}); 

/** Type declaration for ambient System. */ 
declare var System: any; 

// Apply the CLI SystemJS configuration. 
System.config({ 
    map: { 
     '@angular': 'vendor/@angular', 
     'rxjs': 'vendor/rxjs', 
     'main': 'main.js' 
    }, 
    packages: cliSystemConfigPackages 
}); 

// Apply the user's configuration. 
System.config({ map, packages });

Passings.html

<div class="panel-body"> 
        <div class="row"> 
         <div class="col-xs-12 col-md-12"> 
          <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10"> 
           <thead> 
           <tr> 
            <th>Passing</th> 
            <th>Date</th> 
            <th>Time</th> 
           </tr> 
           </thead> 
           <tbody> 
           <tr *ngFor="let item of mf.data"> 
            <td>{{item[0]}}</td> 
            <td>{{item[1]}}</td> 
            <td>{{item[2]}}</td> 
           </tr> 
           </tbody> 
           <tfoot> 
           <tr> 
            <td colspan="3"> 
             <mfBootstrapPaginator [rowsOnPageSet]="[10,25,100]"></mfBootstrapPaginator> 
            </td> 
           </tr> 
           </tfoot> 
          </table> 
         </div> 
        </div> 
       </div>

出典

2016-08-15 JT-Helsinki