Closed
Description
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
})
]
}
]
}
]
};
}
}