Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:

Viewed 801

I'm working on a project with Angular. When I try to run my app with IIS 8, I get the below error in my console & page does not appear.

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:nomod] Module 'app' 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.

But when I run my app in local it works fine. I'm using gulp build to build my app for IIS.

I researched in many blogs including Stack overflow but yet unable to figure it out the problem.

I've tried to move script tags, re-checked all spelling mistakes but none worked for me. I slightly get a doubt whether the build is not done 100% over gulp.

I've given my index.html file & app.js file below. Please advise me where I have done any mistake.

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 + '/'));
});
0 Answers
Related