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