加载模块时出现角错误[$ injector：modulerr]

Question

[Update] I've found the site works with Microsoft Edge just fine. [更新]我发现该站点可以与Microsoft Edge一起使用。 IE seems to be the only one having issues. IE似乎是唯一有问题的人。

So I've run into an issue where my site fails to load in Internet Explorer and throws this error: 因此，我遇到了一个问题，即我的网站无法在Internet Explorer中加载，并引发以下错误：

[$injector:modulerr] Failed to instantiate module necs due to:
Error: [$injector:modulerr] Failed to instantiate module necs.LandingModule.controller due to:
Error: [$injector:nomod] Module 'necs.LandingModule.controller' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument

The site loads completely fine in both Firefox and Chrome, but refuses to load in Internet Explorer. 该网站可以在Firefox和Chrome中完全正常加载，但是拒绝在Internet Explorer中加载。 I'm not sure what the issue could be as the 'necs.LandingModule.controller' is both spelled correctly and loaded. 我不确定问题可能是什么，因为“ necs.LandingModule.controller”是否正确拼写并已加载。 I've tried removing some of the code within the Controller to see if it would load, hoping that I could find exactly which piece of code IE doesn't like, but I've yet to be successful in doing that. 我尝试删除Controller中的一些代码以查看是否可以加载，希望我能确切找到IE不喜欢的代码，但是我还没有成功做到这一点。

Let me know if you need more information and I will provide as needed. 让我知道您是否需要更多信息，我们会根据需要提供。

CONTROLLER.JS CONTROLLER.JS

angular.module('necs.LandingModule.controller', [
                     'necs.FeaturedItemsModule.directives'])
.controller('LandingController', ['$scope', '$location', '$routeParams', '$window', 'ajaxUtil',
function($scope, $location, $routeParams, $window, ajaxUtil){

  $scope.landingProducts = [1,2,3,4,5,6];

  $scope.getFeaturedProducts = function() {
    ajaxUtil.get('/api/landingProducts', $scope, 'onGetFeaturedProducts');
  };

  $scope.onGetFeaturedProducts = function(response) {
    if (response) {
      $scope.landingProducts = response.data;
    }
  };

  $scope.getCatalogMailer = function(id){
    if (id == 'link1'){
        $window.open("link");
    }else if(id == 'link2'){
        $location.url('link');
    }else if(id =='link3'){
        $location.url('link');
    }else if(id =='link4'){
        $location.url('link');
    }else if(id =='link5'){
        $location.url('link');
    }
  };

  $scope.getFeaturedProducts();

  ga('send', 'pageview', {
  'title': 'landing page'
  });
}]);

INDEX.HTML INDEX.HTML

<!DOCTYPE html>
<html lang="en" ng-app="necs">
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NECS</title>
    <link rel="icon" type="image/png" href="assets/images/icon.png" sizes="32x32" />

    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/app.css">
    <link href='https://fonts.googleapis.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'>

    <script src="/bower_components/angular/angular.js"></script>

     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>


    <script src="/bower_components/angular-route/angular-route.js"></script>
    <script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script src="/bower_components/angular-strap/dist/angular-strap.min.js"></script>
    <script src="/bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
    <script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/bower_components/angularUtils-pagination/dirPagination.js"></script>

    <script src="/js/app.js"></script>
    <script src="/js/controllers.js"></script>
    <script src="/js/directives.js"></script>
    <script src="/js/services.js"></script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-67702514-1', {
        'cookieDomain': 'none'
      });
  </script>

  <base href="/" />

  </head>
  <body data-spy="scroll" data-offset="15">
    <div class="container">
      <header-directive></header-directive>
      <div ng-view >
      </div>
    </div>
      <div class="main-footer">
        <div class="container">
          <footer-directive></footer-directive>
        </div>
      </div>
  </body>
</html>

LANDING.HTML landing.html上

<div class="landing row">
  <div class="row">
    <div class="col-xs-12">
      <div class="well">
        <custom-order-directive></custom-order-directive>
        <featured-items-directive></featured-items-directive>
      </div>
    </div>
  </div>

 <div class="row">
  <div ng-repeat="item in landingProducts" class="col-sm-12 col-md-4">
    <div class="thumbnail main-container">
      <div class="image-container">
        <!--<img ng-click="onProductClick(item.id)" class="top-sellers" ng-src="{{item.img}}" />-->
        <img ng-src="{{item.image}}" />
      </div>
        <div class="caption text-center landinglinks">
        <h3 >{{item.header}}</h3>
        <!--<p ng-bind-html="item.text" ng-click="onProductClick(item.link)"></p>-->
        <p ng-bind-html="item.text" ng-click="getCatalogMailer(item.link)"></p>
  </div>
    </div>
  </div>
</div>

FRONT APP.JS 前APP.JS

angular.module('necs', ['ngRoute',
                        'necs.LandingModule.controller',
                        'necs.CustomModeModule.controller',
                        'necs.CustomOrderModule.controller',
                        'necs.CustomPdfModule.controller',
                        'necs.CatalogModule.controller',
                        'necs.ProductModule.controller',
                        'necs.HeaderModule.directives',
                        'necs.FooterModule.directives',
                        'necs.MenuModule.directives',
                        'necs.DownloadsModule.controller',
                        'necs.InformationModule.controller',
                        'necs.LoginModule.controller',
                        'necs.AccountModule.controller',
                        'necs.AdministrationModule.controller',
                        ])
.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'html/landing.html',
      controller: 'LandingController'
    })
    .when('/customMode', {
      templateUrl: 'html/customMode.html',
      controller: 'CustomModeController'
    })
    .when('/customOrder', {
      templateUrl: 'html/customOrder.html',
      controller: 'CustomOrderController'
    })
    .when('/customPdf', {
      templateUrl: 'html/customPdf.html',
      controller: 'CustomPdfController'
    })
    .when('/catalog', {
      templateUrl:'html/catalog.html',
      controller: 'CatalogController'
    })
    .when('/catalog/product', {
      templateUrl: 'html/product.html',
      controller: 'ProductController'
    })
    .when('/downloads', {
      templateUrl: 'html/downloads.html',
      controller: 'DownloadsController'
    })
    .when('/information', {
      templateUrl: 'html/information.html',
      controller: 'InformationController'
    })
    .when('/cart', {
      templateUrl: 'html/cart.html',
      controller: 'CartController'
    })
    .when('/login', {
      templateUrl: 'html/login.html',
      controller: 'LoginController'
    })
    .when('/account', {
      templateUrl: 'html/account.html',
      controller: 'AccountController'
    })
    .when('/administration', {
      templateUrl: 'html/administration.html',
      controller: 'AdministrationController'
    })
    .otherwise({
      redirectTo: '/'
    });

}]);

SERVER APP.JS 服务器APP.JS

var express = require('express');
var path = require('path');
var mongoose  = require('mongoose');
var session = require('express-session');
var bodyParser = require('body-parser');
var flash = require('connect-flash');
var nodemailer = require('nodemailer');
var exphbs  = require('express-handlebars');
var hbs = require('nodemailer-express-handlebars');
var db = require('./db')();
var user = require('./user')();
var fs = require('fs');
var Cookies = require('cookies');

var Product = require('./product');
var Category = require('./category');
var Download = require('./download');
var Codes = require('./codes');
var Specsheet = require('./specsheet');
var app = express();

app.use(express.static(path.resolve(__dirname + '/../front/static')));

app.use(bodyParser.urlencoded({limit: '50mb'}));
app.use(bodyParser.json({limit: '50mb'}));

app.get('/qr/:qrcode', function (req, res) {
    var domain = 'domain.com/#/qr/';
    var qrcode = req.params.qrcode;

    res.redirect(domain+qrcode);
});

//login
app.use(flash());

app.get('/', function(req, res) {
  res.sendfile('index.html');
});

// parse application/json
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
var server = app.listen(80);

var config = {
  "USER": "user",
  "PASS": "password",
  "HOST": "127.0.0.1",
  "PORT": "22222",
  "DATABASE" : "database"
};

var dbPath  = "mongodb://" + config.USER + ":"+ config.PASS + "@"+ config.HOST + ":"+ config.PORT + "/"+ config.DATABASE;
mongoose.connect(dbPath);

db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function callback () {
    console.log('connected successfully');
});


//landing products
app.get('/api/landingProducts',function(req,res) {

  var landingItems = {
      landing1: {
          image: "/assets/images/landing1.jpg",
          text: "text1",
          header: "header1",
          link: "link1"
      },
      landing2: {
          image: "/assets/images/landing2.jpg",
          text: "text2",
          header: "header2",
          link: "link2"
      },
      landing3: {
          image: "/assets/images/landing3.jpg",
          text: "text3",
          header: "header3",
          link: "link3"
      },
      landing4: {
          image: "/assets/images/landing4.jpg",
          text: "text4",
          header: "header4",
          link: "link4"
      },
      landing5: {
          image: "/assets/images/landing5.jpg",
          text: 'text5',
          header: "header5",
          link: "link5"
      },
      landing6: {
          image: "/assets/images/landing6.jpg",
          text: "text6",
          header: "header6",
          link: "link5"
      }
  };

  res.send(landingItems);

});

Answer 1

I tested on IE 11: 我在IE 11上进行了测试：

This is what I am getting: Expected ':' in controllers.js (1551,3) 这就是我得到的：在controllers.js中应为'：'（1551,3）

It looks like you have declared 3 additional variables, but not properly: 似乎您已经声明了3个其他变量，但未正确声明：

$scope.getWidthDropdown = {
    warr
};

And there are two others. 还有另外两个。

You should change that to 您应该将其更改为

$scope.getWidhtDropdown = {
    warr: warr
};

I am not sure if that will fix the issue though. 我不确定这是否可以解决问题。 Could be a red herring 可能是红鲱鱼

加载模块时出现角错误[$ injector：modulerr]

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-11-21 19:27:41

加载模块时出现角错误[$ injector：modulerr]

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-11-21 19:27:41

解决方案1
3 已采纳 2017-11-21 19:27:41