ng build --prod causes Template Parse Error

Question

I am new to angular and I have built a small application that needs to display a sortable table. It all runs fine in Angular-cli development server in development mode (using ng serve).

I've tried implementing the table with both the ng2-table and angular-table libraries so I suspect this is not a problem associated with either one of these libraries.

However when I build the application using ng build --prod for deployment onto my staging server I receive the following error inside the browser console when I try to access the application"

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>
     "): a@42: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>↵     "): a@42:62"

I've updated my code so that it is all running using Angular 2.0.0RC5. That is, so that it uses the new @NgModule decorator.

Any help or advice you can offer would be much appreciated. I'm at an end here.

Many thanks

JT

Note: I tried temporarily specifiying the DataTableDirectives as a directive under the component's @Component decorator but this didn't help.

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

system-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, it seems that this is a known issue. See:

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

It is worth reading through this thread as it pretty much explains the whole most of the problem.

For now, don't uglify your code. If you're using angular-cli you may need to do a development build until the next release.