I have a Microsoft SharePoint 2013 application which consists of AngularJS customized application aspx pages. The application works perfectly fine on SP13.

But now the requirement is to move to SPO Modern Teams site. To prevent a lot of SPFx re-development and time lag, I have used a React Script Editor Webpart SPFx Webpart where I can simply copy the HTML and references that are already developed and working script files.

I am facing an intermittent issue where only on the first page load, it gives the below error:

Error: [ng:areq] Argument 'FormCtrl' is not a function, got undefined

When I refresh again, everything loads properly and works fine. I am unable to troubleshoot and figure out the issue trying multiple combinations and seek for help with this community.

Below is how the application is built on SharePoint 2013 (which works fine) but intermittently when moved to SPO React Script Editor Webpart:

• SharePoint aspx page in Pages library.
• Content Editor WebPart with reference to text file containing HTML.
• Reference to jQuery, AngularJS, etc. and custom script files in HTML.
• Custom Script files as:

1. An App File with definition to the app that is declared in the HTML as ng-app

   var app = angular.module('myApp', ['ngRoute']);

2. A Constants file that is used in the controller

   app.constant('config', {
    ListName: 'This is the name of the list'
    });

3. A service file. All REST API calls and common methods are defined here and called from controller

    
    app.service('DataAccessLayer', ['$http', '$q', function ($http, $q) {
            this.method1(){
            ....
            }
   
            this.method2(){
            ....
            }
        });
    
    

4. The main controller file which has the functionality written:

app.controller('FormCtrl', function ($scope, config, DataAccessLayer) {});