Failure error: [$ injector: modulerr] Failed to create module app because of:

Question

Failure error: [$ injector: modulerr] Failed to create module app because of:

I am working on a project with Angular. When I try to run my application with IIS 8

, I get the following error in my console and the page does not appear.

Unprepared error: [$ injector: modulerr] Failed to create module application due to: Error: [$ injector: nomod] Module "application" is not available! You either wrote down the module name by mistake or forgot to load it. When registering, the module ensures that you supply the dependencies as the second argument.

But when I run my application on my local machine, it works fine. I am using gulp build

to build my application for IIS.

I've researched on many blogs including stack overflow but still couldn't figure out the problem.

I tried to move the script tags, recheck all spelling errors, but none worked for me. I have a little doubt that the build is not 100% complete when compared to gulp.

I gave the file index.html

and app.js

below. Please tell me where I went wrong.

app.module.js

(function() {
'use strict';

angular
    .module('app', [
        'triangular',
        'ngAnimate', 'ngCookies', 'ngSanitize', 'ngMessages', 'ngMaterial',
        'ui.router', 'pascalprecht.translate', 'LocalStorageModule', 
'googlechart', 'chart.js', 'linkify',
        'ui.calendar', 'angularMoment', 'textAngular', 'uiGmapgoogle-maps', 
'hljs', 'md.data.table',
        angularDragula(angular), 'ngFileUpload', 'ngProgress',
        //'app.examples',
        'roadrunner'
    ])
    // create a constant for languages so they can be added to both 
triangular & translate
    .constant('APP_LANGUAGES', [{
        name: 'LANGUAGES.CHINESE',
        key: 'zh'
    },{
        name: 'LANGUAGES.ENGLISH',
        key: 'en'
    },{
        name: 'LANGUAGES.FRENCH',
        key: 'fr'
    },{
        name: 'LANGUAGES.PORTUGUESE',
        key: 'pt'
    }])
    // set a constant for the API we are connecting to
    .constant('API_CONFIG', {
        'url':  'http://triangular-api.oxygenna.com/'
    })
    .run(function (auth, $rootScope, $state, $mdToast, ngProgressFactory) {

        auth.tryRestoreSession();

        var progressbar = ngProgressFactory.createInstance();

        $rootScope.$on('$stateChangeStart', function (event, toState, 
toParams, fromState, fromParams) {
            //!auth.checkAuth(); // check for null $rootScope.user 
            //!toState.freeAccess; // check for no freeAccess state

            progressbar.setColor("rgb(156,39,176)");
            progressbar.start();                
            //progressbar.set(40);

            if (toState.freeAccess !== true && !auth.checkAuth()) {
                event.preventDefault();
                $state.go('authentication.login');
            }
            if (toState.name == 'authentication.login') {
                if (auth.checkAuth()) {
                    event.preventDefault();
                    $state.go(fromState.name !== "" ? fromState.name : 
'triangular-no-scroll.student.profile');
                    $mdToast.show({
                        template: '<md-toast class="md-toast 
success">Already logged in</md-toast>',
                        hideDelay: 3000,
                        position: 'top right'
                    })
                }
            }
        });

        $rootScope.$on('$stateChangeSuccess', function (event, toState, 
toParams, fromState, fromParams) {
            progressbar.complete();
        });
    })
})();

index.html

<!doctype html>
<html class="no-js" ng-app="app">
<head>
<meta charset="utf-8">
<title>Triangular</title>

<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js">
</script>....

<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<script src="app/modules/student/common/student.common.module.js"></script>
<script src="app/modules/student/common/models/student.model.js"></script>
<script src="app/app.module.js"></script>...

bower.js

gulp.task('bower', ['clean'], function () {
gulp.start('bower:build');
});

gulp.task('bower:build', ['bower:scripts', 'bower:styles', 
'bower:scripts:minify', 'bower:styles:minify']);

gulp.task('bower:scripts', ['bower:partials'], function() {
return gulp.src([
path.join(paths.src, '/app/triangular/**/*.js'),
path.join(paths.tmp, 'partials', 'templateCacheHtml.js')
])
.pipe($.angularFilesort())
.pipe($.ngAnnotate())
.pipe($.concat('triangular.js'))
.pipe(gulp.dest(paths.dist + '/'));
});