Angular Error [$injector:modulerr] when loading module

Question

[Update] I've found the site works with Microsoft Edge just fine. IE seems to be the only one having issues.

So I've run into an issue where my site fails to load in Internet Explorer and throws this error:

[$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. I'm not sure what the issue could be as the 'necs.LandingModule.controller' is both spelled correctly and loaded. 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.

Let me know if you need more information and I will provide as needed.

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



  
    
    NECS

LANDING.HTML


  
    
      
        
        
      
    
  

 
  
    
      
        
        
      
        
        {{item.header}}

FRONT 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

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);

});

Anathema · Accepted Answer

I tested on IE 11:

This is what I am getting: Expected ':' in controllers.js (1551,3)

It looks like you have declared 3 additional variables, but not properly:

$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

Angular Error [$injector:modulerr] when loading module

Answers (1)

Related Questions