Angularjs ng build--prod导致模板分析错误

我是angular的新手，我已经构建了一个需要显示可排序表的小应用程序。在Angular cli development server的开发模式下（使用

ng-serve

），这一切都可以正常运行

我已经尝试使用ng2表和角度表库来实现该表，因此我怀疑这与这些库中的任何一个都没有关系

但是，当我使用

ng build--prod

构建应用程序以部署到我的暂存服务器时，当我尝试访问该应用程序时，在浏览器控制台中收到以下错误“

系统配置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 {
}

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

经过
日期
时间
{{item[0]}
{{项目[1]}
{{项目[2]}

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

这篇文章很值得一读，因为它几乎解释了问题的大部分

---

现在，不要弄脏你的代码。如果你使用angular cli，你可能需要在下一个版本之前进行开发构建。

是的，通过

ng build-prod

构建会抛出此错误，临时解决方案是

ng build

<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>