bartathalon bartathalon - 1 month ago 30
Javascript Question

Error: [ng:areq] Argument 'MainController' is not a function, got undefined in IE

I hate to ask this question b/c there are so many similar to it but I have wasted 5 hours today trying to solve what is causing this issue. My app runs perfect in Chrome and Firefox, but in IE 11 or Edge, I receive a

SCRIPT1006: Expected ')' MapService.js (43,55)
,
SCRIPT1006: Expected ')' MainController.js (299,44)
, and
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
errors. My code is structured as follows :

index.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 2nd error supposedly is */
var updateMap = function() {
MapService.updateCurrentRotation();
MapService.updateCurrentZoom();
MapService.updateCurrentCenter();
$scope.setVisibility();
};
// line below is 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 2nd error supposedly is */
})

.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 1st error supposedly is */
this.createProjection = function() {
this.proj = new ol.proj.Projection({
code: 'EPSG:0000',
units: 'pixels',
extent: [0, 0, 8192, 8192]
});
};

/* next line is 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 1st error supposedly is */
});


I have checked JSLint to check for errors in my code but nothing was found that fixed the IE error. I am not using a global controller declaration, I have not called ng-app twice, I believe my javascript calls are in the proper order, I am not overriding my SS module, I haven't found any comma or bracket errors. I am stumped. I have read through so many others solutions and I have checked all the options on the checklist here.

Does the fact that those two
)
errors keep showing and that this is only occurring in IE provide a hint as to my problem ?

Answer

I think your issue is the default params:

ind=$scope.currentId, prev=$scope.prevId
...
isVisible=false, counter=1

This is an ES6 feature, and according to this compatability chart, IE11 and Edge only have partial support for ES6. It's not supported until Edge 14.

You can either change your code, use a transpiler, use an ES6 shim, or (my favorite) drop support for Internet Explorer.