Deploying Angular 2 solution to SPFx web part fails in production

[BenGWeeks]

Category

• Question
• Typo
• Bug
• Enhancement / Suggestion
• Additional article idea

Expected or Desired Behavior

I would expect the deployed version running on a modern page to run as per the local workbench version. I am wondering if this is because the web part site within a larger FORM on the page or some bundling issue.

Observed Behavior

Works in the workbench, but (after renaming the bundle, see: #405, perhaps related) I get the following error:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngmodel' since it isn't a known property of 'input'.

Steps to Reproduce

Use SharePoint Yeoman to create a project, create an app folder with angular assets in it, bootstrap load the angular 2 module to the web part. See:

http://www.sharepointtweaks.com/2016/08/sharepoint-framework-angular2-sample.html

This has the following app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RequirementAppComponent } from './app.component';

// Import Kendo stuff
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { UploadModule } from '@progress/kendo-angular-upload';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { GridModule } from '@progress/kendo-angular-grid';

import { JsonpModule } from '@angular/http';

@NgModule({
   declarations: [
       RequirementAppComponent
   ],
   imports: [
       BrowserModule,
       FormsModule,
       HttpModule,

       // Register Kendo stuff
       ButtonsModule,
       DropDownsModule,
       LayoutModule,
       UploadModule,
       GridModule,

       // To get JSON data we need this
       JsonpModule,
   ],
   providers: [],
   bootstrap: [RequirementAppComponent]
})
export class AppModule { }

And RequirementsFormWebParts.ts has:

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
//import { escape } from '@microsoft/sp-lodash-subset';

// We need this for Angular
import 'reflect-metadata';
require('zone.js');

// Start Kendo Changes
import './polyfills';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
//import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
// End Kendo Changes

//import styles from './RequirementsForm.module.scss';
//import * as strings from 'requirementsFormStrings';
import { IRequirementsFormWebPartProps } from './IRequirementsFormWebPartProps';

export default class RequirementsFormWebPart extends BaseClientSideWebPart<IRequirementsFormWebPartProps> {

  public render(): void {
    this.domElement.innerHTML = '<app-root></app-root>';
    platformBrowserDynamic().bootstrapModule(AppModule);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: "Description" //strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: "Group Name", //strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: "Description" //strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

[BenGWeeks]

I believe the issue is here:

angular/angular-cli#1644

Which says the fix is to put:

new webpack.optimize.UglifyJsPlugin({
        beautify: false, //prod
        mangle: { screw_ie8 : true, keep_fnames: true }, //prod 
        compress: { screw_ie8: true }, //prod
        comments: false //prod
      }),

However, I am unclear how to put this into in the gulpfile.json.

Related question here:

#407

[iclanton]

Closed because this is a dupe of #407.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues