AngularJS assertion failure on SharePoint React Script Editor Webpart SPFx Webpart - javascript

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:
An App File with definition to the app that is declared in the HTML as ng-app
var app = angular.module('myApp', ['ngRoute']);
A Constants file that is used in the controller
app.constant('config', {
ListName: 'This is the name of the list'
});
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(){
....
}
});
The main controller file which has the functionality written:
app.controller('FormCtrl', function ($scope, config, DataAccessLayer) {});

Related

How to include AngularJS in a page

I'm making a NodeJS application and I want to use AngularJS for my client side scripting. I downloaded AngularJS via NPM and now I'm trying to get it implemented within my page, for some reason my requite isn’t working. Can anyone help me include the AngularJS file?
Post page.
extends layout
block content
script(src="/javascripts/postCtrl.js")
// Page Content
.container(ng-app='postModule', ng-controller='postCtrl')
form(method='post')
button(ng-click='test()') Click to test Button
Post script
var angular = require('angular');
var app = angular.module('postModule', []);
app.controller('postCtrl', function ($scope, $sce) {
$scope.test = function(){
alert("Working");
};
});
client side javascript does not support require. Before you put postCtrl.js into your front-end page, you should use babel or webpack to compile it into client side executable javascript

Angular routing behaving strange/differently with different browsers

I just finished coding a new web project using AngularJS and Bootstrap. The development took place using Brackets, an editing tool that launches Chrome for testing while functioning as the web server.
So far, everything works as required both when Brackets is used as the server as well as when the whole project is deployed within a Tomcat installation, and this as long as the browser being used is Chrome and the machine is a Windows 10 computer.
Now, I started testing the project using different browsers and devices (e.g tablets, mobiles, etc.) and, oops! I am getting crashes all the time.
It would appear that the first (and perhaps central) issue is coming from the way I implemented and use Angular's routing services (or, at least, this is what is suggested by several posts I found). Two things are happening (depending on the browser and the action triggered) pointing in that direction:
I received many times the error infdig, meaning that there is an infinite reload loop somewhere,
When the user successfully logs into the the system, an object containing the user's details is stored as a $rootScope object, and when a $window.location.href command is used to move to other page, all the user information previously stored disapears (strangely, this s not happening with Chrome, but it is with IE and Edge!).
Unfortunately, I was unable to fully understand what is the proper way of using the routing services.
The structure of the project is:
[MyApp] -- This is the folder containing the whole project under TOMCAT's "webapps" folder
index.html
index.js -- Contails the controller related ot the index.html page
[pages] -- Sub-folder hosting all the pages of the project except for the `index.html`
page1.html
page2.html
:
:
[js] -- Sub-folder hosting the controllers of each and every sub-page
page1.js -- Sub-page controller
page2.js -- Sub-page controller
:
:
Transition to the sub-pages (e.g. page1.html, etc.) takes place using the command $window.location.href = "#page1.html";, and the routing service is defined:
$routeProvider
:
:
.when('page1.html', {
templateUrl: '#/pages/page1.html',
controller: 'Page1Controller'
}
.when('page2.html', {
templateUrl: '#/pages/page2.html',
controller: 'Page2Controller'
}
:
:
Based on some posts related to how to define routing, I also tried:
.when('page1.html', {
templateUrl: 'pages/page1.html',
controller: 'Page1Controller'
}
and
.when('page1.html', {
templateUrl: '/pages/page1.html',
controller: 'Page1Controller'
}
getting errors in both cases (e.g. page not found).
Additionally, it is not clear to me what is the impact of including the statement $locationProvider.html5Mode(true); (when including this, I got an injection error).
How can I properly use this Angular routing service, and how can I set HTML5 mode?
Routing params: the way I've done it and it works for me and its simple is using the same route function I showed before:
Then if you look at 'searchresult/:searchCriteria' :search criteria is already a parameter that I am putting in a JavaScript variable called sys (i.e at the beginning of my JavaScript I declare variable var sys = null;).
Then on the SearchResult Controller I put the value of sys inside a $scope variable let's say $scope.sys = sys;. This gives you the variable both in the scope and in JavaScript if you want to check the values in developer tools console and/or play with them.
To call the pafe http://url/#searchresult/myvalue
Just like before call $location.path("/searchresult/myvalue")
like this you can create a path with many arguments (i.e "/searchresult/myvalue1/myvalue2/myvalue3") and they all will be stored in the variable sys
PS: if you want to change your whole url use window.location.replace('new url') without any $. The difference between this routing and the Angular is that this will refresh the page while angular will only refresh your ng-view
Regarding the page not found issue make sure that templateUrl: 'pages/page2.html' has the same path as in the actual folders
- capital letters
- the s in "pages" is also present in the pages folder
Also make sure that the permission are ok such that your application is not getting denied access to the file. I don't know what OS you are using but make sure your application can access it
Regarding the loop error, to help I would need to see a bit more code, but if you open the application in Chrome and see the error in the developer tools it may give you a hint as of where your application is crashing. The other approach is to start commenting part of the application until you don't get the error to find the problematic line then analyze.
This is an example of a controller I use without problems:

Including directives with phonegap

I am using yeoman to generate an angular application and deploying it with phonegap to a mobile platform (ios) to be exact, however I am having issues with getting directives to work.
I have a directive called "header" that basically does what it says on the box and displays a header and looks like this.
I am using yeoman to generate an angular application and deploying it with phonegap to a mobile platform (ios) to be exact, however I am having issues with getting directives to work.
I have a directive called "header" that basically does what it says on the box and displays a header and looks like this.
angular.module('myappApp').directive('header', function(contentUpdater) {
function link(scope) {
scope.contentUpdater = contentUpdater;
scope.headerTextThin = scope.contentUpdater.getHeaderTextThin();
scope.headerTextBold = scope.contentUpdater.getHeaderTextBold();
}
return {
restrict: 'E',
link: link,
scope: {
},
templateUrl: 'header.html'
};
});
Even though it shows on the browser, when i simulate with phonegap run ios it doesn't show up. I do have the header in under app/scripts/directives/header.html and the js file in app/scripts/directives/header.js
I don't remember whether Phonegap minifies code by default, but perhaps it is uglifying the Javascript before deploying it on the iOS?
In that case, this should fix the problem:
angular.module('myappApp').directive('header',
['contentUpdater', function(contentUpdater) {
// ...
}]);

Injecting Angular app with Chrome Extension Content Script: "App Already Bootstrapped with this Element ''"

I am writing a Chrome extension content script, which injects an angular application into a page. When the page loads, I get the following error:
Error: ng:btstrpd App Already Bootstrapped with this Element
However, my content script only calls angular.bootstrap once. This is how it is being injected and bootstrapped:
var angularDiv = document.querySelector('#content');
angular.bootstrap(angularDiv, ['SESApp']);
angularDiv.classList.add('ng-app');
angularDiv.classList.add('ng-csp');
I have a stripped down version of my angular app and content script here:
https://gist.github.com/hedgerh/e73cd1136f1f1d453ee2
If anyone knows what's going on, I would greatly appreciate the help. Thanks!

Rally-app-builder displays nothing in browser for "Story Board" app

I have been attempting to learn how to build a Rally app using the rally-app-builder. I began wiith the Your first Rally app tutorial at https://help.rallydev.com/apps/2.0rc3/doc/#!/guide/first_app, after following the instructions for installing Node.js, and the rally-app-builder, I got to the step where we are supposed to add a rallycombobox to our app. However, when I run the App-debug.html file, my screen is blank. I have attempted to add other objects rather than a combobox and still nothing appears on the screen in the browser. I noticed that one other person had asked this question several months ago, but there is no answer posted as to why this might happen. I attempted to view the App-debug.html file in several browsers as well. None of them displayed the expected output.
Here is the code for the app.js file.
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function () {
this.iterationCombobox = this.add({
xtype: 'rallyiterationcombobox',
listeners: {
ready: this._onIterationComboboxLoad,
scope: this
}
});
},
});
If I use the exact code you posted I get this error in the console of Chrome's DevTools:
Uncaught TypeError: Cannot read property 'fn' of undefined
The reason for it is that in this code _onIterationComboboxLoad is called but never defined.
Try an alternative browser and check javascript console for errors.
To fix the error you may add this method after launch :
_onIterationComboboxLoad:function(){
//can be empty for now
}
As far as general steps to use rally app builder, try this:
Assuming rally app builder is installed, a command rab --version should return a version, e.g. 0.9.2
In the terminal, cd to a directory that you created for a Story Board app.
Run this command:
rab init "Story Board" 2.0rc3
You should see this output:
Creating a new App named Story Board
Creating App-debug.html
Creating App.html
Creating App-uncompressed.html
Success
Look at the code that the rally-app-builder (rab) generated:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items:{ html:'App SDK 2.0rc3 Docs'},
launch: function() {
//Write app code here
}
})
Open App-debug.html in a browser.
There should be a link to AppSDK2rc3 documentation on top of an otherwise empty page. This link indicates that the app is working.
Assuming it works, you may delete the content of App.js file generated by rab and replace it with the entire code example from the Building Your First App guide here. Copy the entire code of App.js under "The finished app should look like this" and test it in the browser to make sure it works. After that you may delete the content of App.js file once again and go back to the guide and follow it step by step, knowing what to expect.
If at any point you get an empty page, check the console in Dev Tools of your browser and also try alternative browsers. If you are not currently logged in to Rally in another tab of the same browser you will be prompted to login when loading App-debug.html.
There's a couple of things that I have learned with this problem and I had a lot of issues with finding information on the blank Story Board page.
One is that you should be using an API key in the URL string that is defined at the Rally instance that you are trying to access. Without that, you will be faced with errors that show up in the Development tools as no "Access-Control-Allow-Header" errors and a blank screen. So the process would be developing with rally-app-builder that you run the web instance locally with rally-app-builder -run then in the URL when the web browser opens add a ?apiKey="Your api key" then refresh the browser.

Categories