Angular is not defined random (Firefox 52.0 / IE11)

Question

i'm using angular 1.5.8 with uglify and got some very weird logs with " ReferenceError: Uncaught ReferenceError: angular is not defined " for var application = angular.module('app'..." with users on Windows 7/10, Firefox 52.0.

I used some virtual machines to debug without any success.

Here is my code:

<!doctype html>
<html lang="en" ng-controller="MainCtrl">

<head>
  <meta charset="utf-8" />
  <title>angular-kickstart</title>
  <meta name="description" content="angular-kickstart - speed up your AngularJS development and testing with a great gulpjs build system.
">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title ng-bind="title"></title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="keywords" content="AngularJS, angular-kickstart, gulp, bower, vesparny" />

  <!-- build:css assets/css/main.css -->
  <link rel="stylesheet" type="text/css" href="src/vendor/pure/pure.css" />
  <link rel="stylesheet" type="text/css" href="src/vendor/pure/grids-responsive.css" />
  <link rel="stylesheet" type="text/css" href="tmp/main.css" />
  <!-- endbuild -->
</head>

<body>
  <div>
    <header ui-view="header"></header>
    <div ui-view class="l-page island"></div>
    <footer ui-view="footer"></footer>
  </div>

  <!-- build:js assets/js/vendor.js -->
  <script type="text/javascript" src="src/vendor/angular/angular.js"></script>
  <script type="text/javascript" src="src/vendor/angular-ui-router/release/angular-ui-router.js"></script>
  <!-- endbuild -->

  <!-- build:js assets/js/main.js -->
  <script type="text/javascript" src="src/app/app.js"></script>

  <script type="text/javascript" src="src/app/getting-started/getting-started.js"></script>
  <script type="text/javascript" src="src/app/home/home.js"></script>

  <script type="text/javascript" src="src/common/directives/version.js"></script>
  <script type="text/javascript" src="src/common/interceptors/httpInterceptor.js"></script>
  <script type="text/javascript" src="src/common/services/dataService.js"></script>
  <script type="text/javascript" src="src/common/filters/uppercase.js"></script>

  <script type="text/javascript" src="src/common/header.js"></script>
  <script type="text/javascript" src="src/common/footer.js"></script>

  <script type="text/javascript" src="tmp/templates.js"></script>
  <!-- endbuild -->
</body>

</html>

js file:

(function() {
  'use strict';

  function config($stateProvider, $urlRouterProvider, $logProvider, $httpProvider) {
    $urlRouterProvider.otherwise('/');
    $logProvider.debugEnabled(true);
    $httpProvider.interceptors.push('httpInterceptor');
    $stateProvider
      .state('root', {
        views: {
          'header': {
            templateUrl: 'src/common/header.tpl.html',
            controller: 'HeaderCtrl'
          },
          'footer': {
            templateUrl: 'src/common/footer.tpl.html',
            controller: 'FooterCtrl'
          }
        }
      });
  }

  function MainCtrl($log) {
    $log.debug('MainCtrl laoded!');
  }

  function run($log) {
    $log.debug('App is running!');
  }

  angular.module('app', [
      'ui.router',
      'home',
      'getting-started',
      'common.header',
      'common.footer',
      'common.services.data',
      'common.directives.version',
      'common.filters.uppercase',
      'common.interceptors.http',
      'templates'
    ])
    .config(config)
    .run(run)
    .controller('MainCtrl', MainCtrl)
    .value('version', '1.1.0');

  function getLocale() {
    var initInjector = angular.injector(["ng"]);
    var $http = initInjector.get("$http");

    var available_languages = ['de_DE', 'en_GB', 'es_ES', 'fr_FR', 'it_IT'];

    if(_.isUndefined(CONST_LANG) || _.isNull(CONST_LANG) || !_.contains(available_languages, CONST_LANG.fullcode)){
      CONST_LANG = {shortcode:'en', fullcode:'en_GB'};
    }

    return $http.get('assets/locale/' + CONST_LANG.fullcode + '.json').then(function(response) {
      application.constant("LOCALE", response.data);
    }, function(errorResponse) {
      console.log(errorResponse);
    });

  }

  function bootstrapApplication() {
    angular.element(document).ready(function () {
      angular.bootstrap(document, ['app']);
    });
  }

  // Load locale before angular's bootstrap
  getLocale().then(bootstrapApplication);
})();

It's very strange, it's like sometimes for any reason my angular was not correctly loaded..

Any ideas ?

Answer 1

尝试将以下内容更改为： <html lang="en" ng-controller="MainCtrl">更改为<html lang="en" ng-app="app"> <html lang="en" ng-controller="MainCtrl"> <html lang="en" ng-app="app">

Answer 2

As @kennypowers said you must first replace <html lang="en" ng-controller="MainCtrl"> with <html lang="en" ng-app="app">

You also need to attach MainCtrl to a document node, for example on body :

<body ng-controller="MainCtrl">

Also move <script type="text/javascript" src="src/vendor/angular/angular.js"></script> to <head> tag to ensure angular will be available when your js file is loaded

A good practice is also to first init your module

angular.module('app', [
      'ui.router',
      'home',
      'getting-started',
      'common.header',
      'common.footer',
      'common.services.data',
      'common.directives.version',
      'common.filters.uppercase',
      'common.interceptors.http',
      'templates'
    ]);

and then declare controllers, directives, config, ... anywhere like this :

(function () {
    'use strict';

    angular
        .module('app')
        .directive('myDirective', myDirective);

    myDirective.$inject = ['$compile'];

    function myDirective($compile) {
        return function (scope, element, attrs) {

            ...
        };
    }

})();

Angular is not defined random (Firefox 52.0 / IE11)

Question

2 answers

solution1
0 2017-04-05 21:25:15

solution2
0 2017-04-05 21:40:05

Angular is not defined random (Firefox 52.0 / IE11)

Question

2 answers

solution1 0 2017-04-05 21:25:15

solution2 0 2017-04-05 21:40:05

solution1
0 2017-04-05 21:25:15

solution2
0 2017-04-05 21:40:05