Sp-dev-docs: Error - Angular with SharePoint Framework

[sprider]

Trying to test a simple angular app in SPFX. It is working fine when the files are referred from local. If if i provide cdnBasePath in write-manifests.json its not working. Any idea?

i have attached the error i am getting in developer tool

[waldekmastykarz]

Could it be that you're calling app bootstrap before the HTML template is loaded which is why the application is not being bootstrapped? Instead of using import on controller_home could you change it to require and move it to line 31 in the WebPart.ts file? Also note, that you should bootstrap Angular app only once so would need to wrap the whole block in if (this.renderedOnce === false)

[sprider]

Tried to implement your suggestion but i am getting the same error

import {
BaseClientSideWebPart,
IPropertyPaneSettings,
IWebPartContext,
PropertyPaneTextField
} from '@microsoft/sp-client-preview';

import styles from './MessageCenter.module.scss';
import * as strings from 'mystrings';
import './app/vendor/angular.min.js';

import { IMessageCenterWebPartProps } from './IMessageCenterWebPartProps';

export default class MessageCenterWebPart extends BaseClientSideWebPart {

public constructor(context: IWebPartContext) {
super(context);
}

public render(): void {
if (this.renderedOnce === false) {

  this.domElement.innerHTML = `<div ng-app="app_MessageCenter">
      <div ng-controller="controller_home">
          <div ng-repeat="notification in notifications">
              <p>{{notification.Id}} - {{notification.Title}}</p>
          </div>
      </div>
  </div>`;

}
require('./app/controller_home.js');

}

protected get propertyPaneSettings(): IPropertyPaneSettings {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}

protected get disableReactivePropertyChanges(): boolean {
return true;
}

}

[sprider]

Also could you please let me know the steps to install angular and office UI fabric from npm on my solution instead of local copy?

[waldekmastykarz]

To install angular and ngOfficeUIFabric from npm you should run in the command line:

npm i angular ng-office-ui-fabric -S

Next, to install Angular typings, in the command line run:

tsd install angular --save

To use Angular in your Web Part you need to add:

import * as angular from 'angular';

In your Angular application files you should load ngOfficeUIFabric by calling:

import 'ng-office-ui-fabric';

[waldekmastykarz]

Requiring your angular application should also be wrapped in the renderedOnce clause to ensure that it will be bootstrapped only once as well.

I'd suggest you check the generated bundle in the dist folder and verify that the angular application source is included in the bundle. Additionally you could check the Network tab in Chrome to see if SPFx is trying to load the application's code separately.

[waldekmastykarz]

If it's any help I recently wrote a blog about using Angular for building Client-Side Web Parts with SPFx: https://blog.mastykarz.nl/building-sharepoint-framework-client-side-web-parts-angular/. It also includes a sample repo that you can check out to see how the different pieces fall together.

[sprider]

Hi Waldek,

Thank you so much for your guidance on this. Now the app is working fine locally with gulp serve.

But if i package the same(as explained here https://github.com/SharePoint/sp-dev-docs/wiki/HelloWorld,-Deploy-to-CDN ) and load the webpart from cdn(SharePoint library) its not working.

Error

Working

[waldekmastykarz]

Have you compared the generated bundle with your code to check if everything still looks like the way it's supposed to?

Given that you are using Angular to build Web Parts, of which you can have more than one on the page, I'd suggest you change the way you bootstrap your application. Rather than using the ng-app directive, of which you can have only one on a page, bootstrap application on the specific element. I showed how to do that in my sample repo. That way you make it possible for users to add multiple instances of your Web Part to the page, but also allow other Angular Web Parts to be added to the same page as well.

[sprider]

Hi Waldek,

I have changed the bootstrapping with the below code and i am able to add the webpart multiple times in the same page. In workbench page everything is working fine as expected.

this.$injector = angular.bootstrap(this.domElement, ['app_MessageCenter']);

Still getting the same error if i package and run. Working on it. Will keep you posted

[sprider]

Hi Waldek, For your reference i have shared my code in your yammer inbox.

[sprider]

Hi Waldek,

I have fixed this issue. The issue was with angular injection at the controller end. Thank you so much for your assistance on this.

Latest code can be found here

[lucaseto]

when I run this command:
tsd install angular --save

I get this error
The type definition index.d.ts does not exist. Create one and try again.

[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