'angular' is undefined on IE10

I have developed an AngularJs, RequireJs application with PHP as back-end and is hosted on WAMP server. Server machine name is "ICC-Server" and alias is "iccportal" and domain is "ip.bombay".

When I access the portal with http://iccportal.ip.bombay on IE10 and Chrome it works well.

But If I try to access the same portal without domain name (http://iccportal), I get following error.

SCRIPT5009: 'angular' is undefined app.js, line 4 character 1

SCRIPT5009: 'angular' is undefined main.js, line 6 character 5

I am not sure if issue with requirejs or WAMP. Please guide.

Following is the code snippet for main.js and app.js

Main.js

require(["app"], function (app) {
    // Following line is more important else angular js will not work
    angular.bootstrap(document.getElementsByTagName("body")[0], ["wkPortal"]);
});

app.js

(function (define, angular) {
    "use strict";
    // enable/disable logs
    define(["components/home/homeController","components/home/homeService"], function (homeController, homeService) {
            var app = angular.module("wkPortal", ["ngRoute", "ngSanitize"]);
            // register home controller
            app.controller("HomeController", homeController);
            // register home service
            app.service("HomeService", homeService);
            return app;
        }
    );

}(define, angular));

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
  <title>ICC Portal</title>
  <!-- CSS ===================== -->
  <!-- load bootstrap -->
  <link rel="stylesheet" href="assets/css/bootstrap.css">
  <link rel="stylesheet" href="assets/css/bootstrap-theme.css">
  <link rel="stylesheet" href="assets/css/MetroJs.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div ng-view></div>
<!-- JS -->
<!-- load jquery -->
<script src="assets/js/jquery-2.1.0.js" type="application/javascript"></script>
<script src="assets/js/jquery-ui.js" type="application/javascript"></script>
<script src="assets/js/jquery.validate.js" type="application/javascript"></script>

<!-- Bootstrap -->
<script src="assets/js/bootstrap.js" type="application/javascript"></script>

<!-- load angular -->
<script src="assets/js/angular.min.js" type="application/javascript"></script>
<script src="assets/js/angular-animate.js" type="application/javascript"></script>
<script src="assets/js/angular-cookies.js" type="application/javascript"></script>
<script src="assets/js/angular-route.js" type="application/javascript"></script>
<script src="assets/js/angular-touch.js" type="application/javascript"></script>
<script src="assets/js/angular-sanitize.js" type="application/javascript"></script>
<script src="assets/js/MetroJs.js" type="application/javascript"></script>


<!-- application app -->
<script data-main="app/main" src="assets/js/require.js"></script>
</script>
</body>
</html>

Thanks, Indrajit

回答1:

The problem can be caused by an older document-mode. Try going to developer tools (F12), and manually changing the document-mode. If that works, check why your site forces an older document mode. A likely cause may be the following line in your HTML head section:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

How Internet Explorer Chooses Between Document Modes: Link

回答2:

You should not explicitly import AngularJS if you are using RequireJS. In this case Angular should be loaded by RequireJS and you should bootstrap your application manually. Google a little about it and you will find the solution.