I find it somewhat challenging to pose this query since there are numerous akin to it, yet I've dedicated 5 hours today attempting to resolve the underlying cause of this predicament. Despite my application functioning flawlessly in Chrome and Firefox, it encounters errors such as
SCRIPT1006: Expected ')' MapService.js (43,55)SCRIPT1006: Expected ')' MainController.js (299,44)Error: [ng:areq] Argument 'MainController' is not a function, got undefinedindex.html
<html lang="en" ng-app="SS" ng-controller="MainController as ctrl" >
<script src="src/index.js"></script>
<script src="src/SS/DefaultConfigs.js"></script>
<script src="src/SS/MapService.js"></script>
<script src="src/SS/MainController.js"></script>
....
index.js
angular
.module("SS", ["ngMaterial", "angular-intro"])
.config(function($mdThemingProvider, $mdIconProvider) {
"use strict";
$mdIconProvider
.defaultIconSet("./assets/svg/settings.svg", 128)
.icon("clipboard", "./assets/svg/clipboard_48px.svg", 48)
.icon("close", "./assets/svg/close_48px.svg", 48);
....
$mdThemingProvider.theme("default")
.primaryPalette("blue")
.dark();
});
MainController.js
angular
.module('SS')
.controller('MainController', function($interval, $location, $mdDialog, $mdSidenav, $mdToast, $scope, DefaultConfigs, MapService) {
'use strict';
var animationRunner;
....
/* Snippet of code surrounding where the 2nd error supposedly occurs */
var updateMap = function() {
MapService.updateCurrentRotation();
MapService.updateCurrentZoom();
MapService.updateCurrentCenter();
$scope.setVisibility();
};
// line below marks line 299
$scope.setVisibility = function(ind=$scope.currentId, prev=$scope.prevId) {
var temp = MapService.layers;
if (layerExists(prev)) {
temp[prev].setVisible(false);
}
if (layerExists(ind)) {
temp[ind].setVisible(true);
}
};
/* End snippet of code surrounding where the 2nd error supposedly occurs */
})
.directive('ngRightClick', function($parse) {
....
});
MapService.js
angular
.module('SS')
.service('MapService', function($location, DefaultConfigs) {
'use strict';
this.map = null;
this.layers = [];
/* Snippet of code surrounding where the 1st error supposedly arises */
this.createProjection = function() {
this.proj = new ol.proj.Projection({
code: 'EPSG:0000',
units: 'pixels',
extent: [0, 0, 8192, 8192]
});
};
/* next line designates line 43 */
this.createLayer = function(ind, isVisible=false, counter=1) {
var imageLayer = new ol.layer.Tile({
preload: Infinity,
source: new ol.source.XYZ({
url: this.baseURL + ind + '/{z}-{y}-{x}.png',
projection: this.proj,
wrapX: false,
attributions: [this.tileAttribution]
}),
transitionEffect: 'resize',
visible: isVisible
});
imageLayer.id = counter;
imageLayer.playerId = parseInt(ind, 10);
return imageLayer;
};
/* End snippet of code surrounding where the 1st error supposedly emerges */
});
Although I have utilized JSLint to identify potential errors within my code, none remedied the IE discrepancy. I have confirmed that no global controller declaration is being used, no instances of calling ng-app twice exist, my JavaScript calls appear to be in correct sequence, and there are no module overrides related to SS. Despite reviewing various solutions from other sources and checking off all items on the provided checklist here.
Might the repeated appearance of those two ) errors in conjunction with this issue solely manifesting in IE offer any insight into pinpointing the root of the problem?