Sp-dev-fx-webparts: SharePoint Framework WebPart JQuery - AngularJS Conflict

[sprider]

Category

• [ ] Question

I have created a SharePoint Framework WebPart using AngularJS 1.5.8. This is not using TypeScript.

The WebPart works fine until I press Preview button in the workbench.html page. Once I click Preview button, I see the following error:

Sometimes I see this error in the SharePoint Page where this WebPart is added.

Any Idea?

[sprider]

@waldekmastykarz - Any suggestions?

[waldekmastykarz]

Could it be that you're bootstrapping the Angular application in the web part render method without wrapping it in if (this.renderedOnce === false) { }?

[sprider]

You are correct @waldekmastykarz. My WebPart is configured properly with renderedOnce.

I have couple of SPFX WebParts in the same page using angualrjs 1.5.8. Will this affect my WebPart in the same page as I still see the same error?

This is my code. Should I change anything in this?

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IWebPartContext
} from '@microsoft/sp-webpart-base';
import { SPComponentLoader } from '@microsoft/sp-loader';
import { IRecognitionWebPartProps } from './IRecognitionWebPartProps';
import * as angular from 'angular';
import HomeView from './app/HomeView';

export default class RecognitionWebPart extends BaseClientSideWebPart<IRecognitionWebPartProps> {

  private $injector: angular.auto.IInjectorService;

  public constructor(context: IWebPartContext) {
    super();
    SPComponentLoader.loadCss('https://ourcdn/font-awesome.min.css');
  }

  public render(): void {


    if (this.renderedOnce === false) {
     require('./app/app.config.js');
     require('./app/data.service.js');
     require('./app/home.controller.js');
      this.domElement.innerHTML = HomeView.Html;
      this.$injector = angular.bootstrap(this.domElement, ['rideauApp']);
    }

  }

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

[sprider]

I am getting the following error in Firefox and Safari

TypeError: s.bootstrap is not a function

[waldekmastykarz]

Could you also share the contents of ./config/config.json? I'm curious how you are loading Angular and if you're seeing any errors related to it.

[sprider]

Hi @waldekmastykarz

Please find the details below

{
  "entries": [
    {
      "entry": "./lib/webparts/Recognition/RecognitionWebPart.js",
      "manifest": "./src/webparts/Recognition/RecognitionWebPart.manifest.json",
      "outputPath": "./dist/recognition.bundle.js"
    }
  ],
  "externals": {
    "angular": {
      "path": "https://Our Akamai CDN path/js/vendor/angular.1.5.8.min.js",
      "globalName": "angular"
    }
  },
  "localizedResources": {
    "RecognitionStrings": "webparts/Recognition/loc/{locale}.js"
  }
}

[sprider]

The issue is intermittent. Sometime it is working and sometime not. I feel there is a delay in loading the angualrjs file.

[waldekmastykarz]

Can you reproduce the issue with only one web part on the page?

[sprider]

No, The WebPart works consistently when I add it in a different page without other WebParts.

We tried to load the angular file from page layout to see if it works when we have multiple WebParts but no luck.

[waldekmastykarz]

Do you see the issue only when loading Angular from CDN or also when it's included in the bundle?

[sprider]

Yes @waldekmastykarz.

We can see the error when loading Angular from CDN as well as bundle.

[waldekmastykarz]

I can't seem to repro it. Do you have a sample project with the issue that I could have a look at?

[sprider]

As it is company sensitive code, I just created sample files for your review.

Please check your inbox for repository details.

[sprider]

I saw an issue posted for Jquery for similar scenario.

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

[waldekmastykarz]

If I understood it correctly, in that case jQuery was already present on the page, plus the issue was with plugins, not jQuery itself.

[sprider]

Hi @waldekmastykarz

We are getting the similar error when the webparts are failing.

<object>.bootstrap is not a function.

<object> = angular and this can be a.bootstrap or c.bootstrap based on bundled file.

[sprider]

@waldekmastykarz

I found the root cause. The issue occurs when we have JavaScript custom actions with jQuery and angularJS SPFX WebParts in the page.

The jQuery(1.11.1) loads from custom action giving some conflict to SPFX angularJs(1.5.8).

We have few site collection level custom actions(example : global navigation, site analytics telemetry, custom site request link) runs with jQuery(1.11.1). Now I have to find the jQuery version angularJs 1.5.8 likes or resolve the jQuery conflict issue.

Thoughts?

[sprider]

@waldekmastykarz
I have created a repo with sample code and added you as contributor. Please check your account connected to your github. Please refer the readme file for more details.

[waldekmastykarz]

@sprider not sure if it's indeed the case, but jQuery v3.2.1 is being listed amongst AngularJS dependencies. You could try using that version to see if it helps to solve your issue.

[sprider]

@waldekmastykarz

When I use V3.2.1 in custom action the SPFX webpart works in all the browsers except Safari.
Are you suggesting to add jQuery 3.2.1 in SPFX WebPart as dependency?

[sprider]

@waldekmastykarz

We have resolved this issue by removing JQuery from our custom actions for now.

But I am not sure about MS recommendation for Custom Actions with JQuery added in the page with SPFX webPart plus Safari combination. It is definitely not working as we worked with MS engineer regarding this.

I am closing this issue for now. Please reopen if required

[waldekmastykarz]

@sprider what was the error that you were getting in Safari?

[sprider]

Safari was not throwing any errors specifically. But other browsers threw the below error

TypeError: s.bootstrap is not a function

[waldekmastykarz]

When I use V3.2.1 in custom action the SPFX webpart works in all the browsers except Safari.

This is why I asked specifically about Safari.

[sprider]

The SPFx web parts were failing intermittently with JQuery 3.x as well as 2.x but in safari we could reproduce this issue consistently.

We have deployed our custom actions without JQuery and SPFx Webparts are 100% working in all the browsers including iPhone and iPad Safari.

[waldekmastykarz]

When the web part was failing in Safari, were you seeing a specific error?