I have a SharePoint classic page with a Script Editor web part on it. In the Script Editor web part, I am using PnP Widget Wrangler to add a simple AngularJS component to the page, like below:
Script Editor web part:
<div>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script type="text/javascript" src="pnp-ww.min.js"
ww-appName="myApp"
ww-appBind="Angular"
ww-appScripts='[{"src": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js", "priority":0},
{"src": "script.js", "priority":1}
]'>
</script>
</div>
script.js:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
With only the Widget Wrangle component on the page, the AngularJS app loads correctly. However, when I add a basic Hello World SharePoint Framework (SPFx) web part (as described in this article) to the page, the AngularJS component that is initialised by PnP Widget Wrangler stops working. I receive the following AngularJS error:
Failed to instantiate module myApp due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.6.1/$injector/nomod?p0=myApp
