ng build --prod cause模板解析错误

Question

我是新来的角，我建立了一个小应用程序，需要显示一个可排序的表。它在开发模式下的Angular-cli开发服务器上运行良好（使用ng serve）。

我试过用ng2表和angular-table库实现表，所以我怀疑这不是与这些库中的任何一个关联的问题。

然而，当我建立使用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装饰。

任何帮助或建议，您可以提供将不胜感激。我在这里结束。

感谢

JT

注：我试着暂时specifiying的DataTableDirectives作为组件的@Component装饰下一个指令，但这并没有帮助。

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> 

Answer 1

OK，似乎 这是一个已知的问题。请参阅：

https://github.com/angular/angular/issues/10618

值得一通过此线程读取，因为它几乎解释了最全的问题。

现在，不要丑化你的代码。如果您正在使用angular-cli，则可能需要开发构建版本直到下一个版本。