SharePoint Framework WebPart JQuery – AngularJS Conflict

Issue Summary

I have created a SharePoint Framework WebPart using AngularJS 1.5.8 (not using TypeScript) which was working fine in workbench.html. However I have noticed that we get intermittent errors and WebPart failed to render when a user does things like refresh. We could reproduce this error in all the major browsers.

Errors

TypeError: s.bootstrap is not a function

TypeError: qa.fn is undefined

Analysis

One thing is very clear from the error is that the angular related objects/modules are not recognized when the SPFx WebPart is trying to bootstrap. So I started analyzing the other components involved in the page and I could find the following

  1. Custom JavaScript Injections injected in the page such as global navigation using JQuery 1.11.1
  2. More than one SPFx WebPart using angualr 1.5.8

Options Tried 

  1. Initially I thought it might be an angular load timing/sequence issue and tried to reference angular in the page layout directly but no luck
  2. MS Engineer suggested to load JQuery latest version(2.X or 3.X) for custom actions but still I could not resolve the issue.
  3. I also tried to load the custom actions with JQuery noConflict() method

Root Cause 

As we all aware angular uses the lite version of JQuery internally. If JQuery is not available in the page, angular.element delegates to AngularJS’s built-in subset of JQuery, called jqLite. I noticed the SPFx WebPart was loading in all the browsers consistently when custom actions with no JQuery or without custom actions on the page. This means the JQuery(any version) included in the custom action conflicts with the jqLite included in angular. This was the root cause.

Solution

Now I have 2 options

  1. Remove JQuery from custom actions
  2. Avoid JQuery Conflict in SPFX WebPart

In my case I adopted option 1 because I can replace the JQuery related code with pure Javascript in custom actions and there is no clear documentation about option 2.

As per the MS Engineer, The product group is looking at adding some documentation/samples to show how to do option 2. Let us wait for this update as we can not completely avoid JQuery in SharePoint Development.

Reference

https://github.com/SharePoint/sp-dev-fx-webparts/issues/188

How to add external JavaScript file without typings in SharePoint Framework

Problem Statement 

In one of my requirement I have to reference https://c64.assets-yammer.com/assets/platform_embed.js file in SharePoint Framework WebPart to display the yammer feeds. But the platform_embed.js file is not available in npm and typings are also not available.

Solution

As the TypeScript typings is not available for yammer platform_embed.js file, we can’t use import * as yammer from the external settings. Instead, we should use require(‘yammer’).

Also yam is a global object, so we have to change the way we reference it to (window as any).yam.connect.embedFeed() instead of (yam as any).connect.embedFeed()

Thank you Waldek Mastykarz for this suggestion.

Check the below example

spfx1

spfx2

SharePoint Framework – Yammer Feed WebPart using Angular

Summary

This Web Part displays the feeds from yammer using https://c64.assets-yammer.com/assets/platform_embed.js.

Yammer Feed WebPart using AngularYammer Feed WebPart Properties

Used SharePoint Framework Version

drop

Applies to

Solution

Solution Author(s)
angular-yammer Joseph Velliah (SPRIDER, @sprider)

Version history

Version Date Comments
1.0 September 13, 2017 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.


Minimal Path to Awesome

  • clone this repo
  • in the command line run:
    • npm i
    • tsd install
    • gulp serve

Features

The Yammer Feed is a sample Client-Side Web Part built on the SharePoint Framework using Angular.

This Web Part illustrates the following concepts on top of the SharePoint Framework:

  • using Angular for building SharePoint Framework Client-Side Web Parts
  • including Angular in the Web Part bundle
  • using non-reactive Web Part Property Pane and custom Properties
  • using conditional rendering for one-time Web Part setup
  • passing Web Part configuration to Angular and reacting to configuration changes
  • display the yammer feed based on configuration changes