My page stopped working when I ran the "grunt build" command with my Yeoman generated angularjs project. I'm getting the following error:
Uncaught object 127.0.0.1:9000/bower_components/angular/angular.js:3857
Picture from source:
https://dl.dropboxusercontent.com/u/2188934/Skjermbilde%202014-07-05%20kl.%2021.49.26.png
Sometimes I get this instead:
Uncaught object angular.js:78
https://dl.dropboxusercontent.com/u/2188934/Skjermbilde%202014-07-05%20kl.%2022.30.46.png
app.js:
'use strict';
// This is the main js-file where the module corsaneApp is initialized.
angular
.module('corsaneApp', [ // This is all the external angular directives we are using
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ngAnimate',
'summernote',
'ui-sortable'
]) // This shows what html file and controller to load when a url is specified.
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.when('/search', {
templateUrl : 'views/home.html',
controller : 'SearchCtrl'
})
.when('/submit', {
templateUrl : 'views/submit.html',
controller : 'SubmitCtrl'
})
.when('/playlist', {
templateUrl : 'views/home.html',
controller : 'PlaylistCtrl'
})
.when('/playlistbar', {
templateUrl : 'views/playlistbar.html',
controller : 'PlaylistbarCtrl'
})
.when('/resource', {
templateUrl : 'views/resource.html',
controller : 'ResourceCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
index.html:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app="corsaneApp"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/bootstrap-lumen.css">
<link rel="stylesheet" href="styles/animations.css">
<link rel="stylesheet" href="styles/global.css">
<link rel="stylesheet" href="styles/submit.css">
<link rel="stylesheet" href="styles/search.css">
<link rel="stylesheet" href="styles/playlist.css">
<link rel="stylesheet" href="styles/sidebar.css">
<link rel="stylesheet" href="styles/resource.css">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/playlistbar.css">
<link rel="stylesheet" href="styles/resourceinfo.css">
<link rel="stylesheet" type="text/css" href="bower_components/summernote/dist/summernote.css">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- endbuild -->
</head>
<body ng-controller="HomeCtrl" >
<div ng-include src="'views/navbar.html'"></div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container">
<div ng-view></div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<!-- <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-XXXXX-X');
ga('send', 'pageview');
</script> -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js 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/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/fitvids/jquery.fitvids.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/home.js"></script>
<script src="scripts/controllers/playlist.js"></script>
<script src="scripts/filters/reverse.js"></script>
<script src="scripts/controllers/search.js"></script>
<script src="scripts/controllers/submit.js"></script>
<script src="scripts/controllers/navbar.js"></script>
<script src="scripts/services/resource.js"></script>
<script src="scripts/controllers/playlistbar.js"></script>
<script src="scripts/controllers/resource.js"></script>
<script src="scripts/services/list.js"></script>
<script src="scripts/directives/resource.js"></script>
<script src="scripts/controllers/playlistinfo.js"></script>
<script src="scripts/services/global.js"></script>
<script src="scripts/directives/sortable.js"></script>
<!-- endbuild -->
</body>
</html>
grunt build:
grunt.registerTask('build', [
'clean:dist',
'bowerInstall',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngmin',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin',
'htmlmin'
]);
Obviously something goes wrong when the code is minified. My guess is that it have something to do with dependency injection, but I'm also pretty sure I do it the right way (like in app.js).
Okay, so first of all, there is a bug in the chrome debugger (ironically) which causes the error message not to be fully displayed. See this article for more info: http://www.congral.com/2014/05/29/have-you-already-encountered-the-uncaught-object-exception/
After some digging, I found out that it was my summernote dependency that was causing the uncaught object error. Referencing https://docs.angularjs.org/error/$injector/nomod , Angular Docs tells me: "You either misspelled the module name or forgot to load it". However, this error didn't occur because I forgot to load it, but rather because it was removed by Grunt during build. This happened because I loaded my script in the "bower:js" tag, like this:
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/summernote/dist/summernote.js"></script>
<script src="bower_components/angular-summernote/dist/angular-summernote.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
When I moved it outside "endbower", everything worked fine.
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<script src="bower_components/summernote/dist/summernote.js"></script>
<script src="bower_components/angular-summernote/dist/angular-summernote.min.js"></script>
<!-- endbuild -->
Considering I actually installed summernote using bower, I find this to be somehow strange. Further insights to this problem would be appreciated.
Related
Index.html it is the main html page
I am not able to load views in angularjs though ui-route and provider seems working fine ....here is the piece of code
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(client) app/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,client}) app/app.css -->
<link rel="stylesheet" type="stylesheet" href="app/app.css">
<!-- injector:css -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
</head>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js({client,node_modules}) app/vendor.js -->
<!-- bower:js -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.js"></script>
<script type="text/javascript" src="bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="bower_components/angular-socket-io/socket.js"></script>
<script type="text/javascript" src="bower_components/braintree-angular/dist/braintree-angular.js"></script>
<script type="text/javascript" src="bower_components/lodash/dist/lodash.compat.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload/ng-file-upload.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload-shim/ng-file-upload-shim.js"></script>
<script type="text/javascript" src="bower_components/ngCart/dist/ngCart.js"></script>
<!-- endbower -->
<script type="javascript" src="socket.io-socket.io.js"></script>
<!-- endbuild -->
<!-- build:js(.tmp) app/app.js -->
<!-- injector:js -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/account/account.js"></script>
<script type="text/javascript" src="app/account/login/login.controller.js"></script>
<script type="text/javascript" src="app/account/settings/settings.controller.js"></script>
<script type="text/javascript" src="app/account/signup/signup.controller.js"></script>
<script type="text/javascript" src="app/admin/admin.controller.js"></script>
<script type="text/javascript" src="app/admin/admin.js"></script>
<script type="text/javascript" src="app/main/main.controller.js"></script>
<script type="text/javascript" src="app/main/main.js"></script>
<script type="text/javascript" src="app/products/products.controller.js"></script>
<script type="text/javascript" src="app/products/products.js"></script>
<script type="text/javascript" src="app/products/products.service.js"></script>
<script type="text/javascript" src="components/auth/auth.service.js"></script>
<script type="text/javascript" src="components/auth/user.service.js"></script>
<script type="text/javascript" src="components/footer/footer.directive.js"></script>
<script type="text/javascript" src="components/modal/modal.service.js"></script>
<script type="text/javascript" src="components/mongoose-error/mongoose-error.directive.js"></script>
<script type="text/javascript" src="components/navbar/navbar.controller.js"></script>
<script type="text/javascript" src="components/navbar/navbar.directive.js"></script>
<script type="text/javascript" src="components/sidebar/sidebar.controller.js"></script>
<script type="text/javascript" src="components/sidebar/sidebar.service.js"></script>
<script type="text/javascript" src="components/socket/socket.service.js"></script>
<!-- endinjector -->
<!-- endbuild -->
<!-- endinjector -->
<!-- endbuild -->
<body ng-app="meanshopApp">
<!--[if lt IE 7]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div ui-view></div>
</body>
</html>
I an not able to load views in angularjs though ui-route and provider seems working fine ....here is the piece of code
app.js
var app=angular.module('meanshopApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'btford.socket-io',
'ui.router',
'ui.bootstrap',
'ngFileUpload',
'ngCart',
'braintree-angular'
])
app.config(["$stateProvider", "$urlRouterProvider","$locationProvid","$httpProvider",
function ($stateProvider, $urlRouterProvider,$locationProvider, $httpProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('/', {
url: "",
templateUrl: 'app/main/main.html',
controller :'MainCtrl'
})
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
}]);
app.factory('authInterceptor', function($rootScope, $q, $cookies, $injector) {
var state;
return {
// Add authorization token to headers
request: function(config) {
config.headers = config.headers || {};
if ($cookies.get('token')) {
config.headers.Authorization = 'Bearer ' + $cookies.get('token');
}
return config;
},
// Intercept 401s and redirect you to login
responseError: function(response) {
if (response.status === 401) {
(state || (state = $injector.get('$state'))).go('login');
// remove any stale tokens
$cookies.remove('token');
return $q.reject(response);
}
else {
return $q.reject(response);
}
}
};
})
app.run(function($rootScope, $state, Auth) {
// Redirect to login if route requires auth and the user is not logged in
// also if the user role doesn't match with the one in `next.authenticate`
$rootScope.$on('$stateChangeStart', function(event, next) {
if (next.authenticate) {
var loggedIn = Auth.isLoggedIn(function(role) {
if (role && role === next.authenticate) {
return; // logged in and roles matches
}
event.preventDefault();
if(role) {
// logged in but not have the privileges (roles mismatch)
$state.go('onlyAdmin');
} else {
// not logged in
$state.go('login');
}
});
}
});
})
I am not able to load views in angularjs though ui-route and provider seems working fine ....here is the piece of code
main.html
<navbar></navbar>
<header class="hero-unit" id="banner">
<div class="container">
<h1>MEANshop</h1>
<p class="lead">The MEAN stack one stop shop</p>
<img src="assets/images/logo.png" alt="the meanstack shop">
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Featured Products:</h1>
<ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="product in products">
<li><a ui-sref="viewProduct({id: product._id})" tooltip="{{product.description}}">
{{product.title}} -
<span class="text-muted">{{product.price | currency}}</span>
</a></li>
</ul>
</div>
</div>
</div>
<footer></footer>
I an not able to load views in angularjs though ui-route and provider seems working fine ....here is the piece of code
maincontroller
'use strict';
angular.module('meanshopApp')
.controller('MainCtrl', function($state,$scope,$http, socket, Product) {
alert("helloeen");
$scope.products = Product.query();
});
After going through your code, i came across some issues which is basically restricting the main.html to load. Kindly fix below issues in you app.js file
$locationProvider spelling is incorrect
url while defining state should not be blank.
Do you need to enable htmlMode5 because i have faced lot of issues while enabling this.You can use $locationProvider.hashPrefix('') to make URL better;
app.config(["$stateProvider",
"$urlRouterProvider","$locationProvider","$httpProvider",
function ($stateProvider, $urlRouterProvider,$locationProvider, $httpProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('/', {
url: "/",
templateUrl: 'app/main/main.html',
controller :'MainCtrl'
})
$locationProvider.hashPrefix('');
$httpProvider.interceptors.push('authInterceptor');
}]);
I'm running through a Pluralsight for angular testing at Play by Play: Angular Testing, and the first module I add is throwing an NG exception out of the gate.
angular.js:68 Uncaught Error: [$injector:nomod] Module 'app.people' 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.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=app.people
I've been through this many times before, but for some reason I can't find my error today.
DETAILS:
The Angular version is v1.5.8.
My app folder structure is represented in this image, and you'll notice the new people folder I added as per the course:
The new app.people module is :
(function(){
'use strict';
angular.module('app.people',[
'app.core',
'app.widgets',
'app.layout'
]);
});
And I've added the app.people module to app.module :
(function() {
'use strict';
angular.module('app', [
'app.core',
'app.widgets',
'app.admin',
'app.people', // ** NEW PEOPLE MODULE **
'app.dashboard',
'app.layout'
]);
})();
And after running gulp dev-serve from a Win 7 cmd prompt. My index.html file is updated as follows (NB. the people.module.js file injected below the <!-- build:js js/app.js --> section) :
<!DOCTYPE html>
<html ng-app="app">
<head>
<style>
.ng-hide {
display: none!important;
}
</style>
<title ng-bind="title">
angular-test
</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<base href="/">
<!-- build:css styles/lib.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/bower_components/toastr/toastr.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="/.tmp/styles.css">
<!-- endinject -->
<!-- endbuild -->
</head>
<body>
<div>
<div ng-include="'app/layout/shell.html'"></div>
<div id="splash-page" ng-show="showSplash">
<div class="page-splash">
<div class="page-splash-message">
angular-test
</div>
<div class="progress progress-striped active page-progress-bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>
<!-- build:js js/lib.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-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/extras.angular.plus/ngplus-overlay.js"></script>
<script src="/bower_components/moment/moment.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/bower_components/toastr/toastr.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js js/app.js -->
<!-- inject:js -->
<script src="/src/client/app/app.module.js"></script>
<script src="/src/client/app/admin/admin.module.js"></script>
<script src="/src/client/app/blocks/exception/exception.module.js"></script>
<script src="/src/client/app/blocks/logger/logger.module.js"></script>
<script src="/src/client/app/blocks/router/router.module.js"></script>
<script src="/src/client/app/core/core.module.js"></script>
<script src="/src/client/app/dashboard/dashboard.module.js"></script>
<script src="/src/client/app/layout/layout.module.js"></script>
<!-- ****** NEW PEOPLE MODULE INJECTED HERE ***** -->
<script src="/src/client/app/people/people.module.js"></script>
<script src="/src/client/app/widgets/widgets.module.js"></script>
<script src="/src/client/app/admin/admin.controller.js"></script>
<script src="/src/client/app/admin/admin.route.js"></script>
<script src="/src/client/app/blocks/exception/exception-handler.provider.js"></script>
<script src="/src/client/app/blocks/exception/exception.js"></script>
<script src="/src/client/app/blocks/logger/logger.js"></script>
<script src="/src/client/app/blocks/router/router-helper.provider.js"></script>
<script src="/src/client/app/core/config.js"></script>
<script src="/src/client/app/core/constants.js"></script>
<script src="/src/client/app/core/core.route.js"></script>
<script src="/src/client/app/core/dataservice.js"></script>
<script src="/src/client/app/dashboard/dashboard.controller.js"></script>
<script src="/src/client/app/dashboard/dashboard.route.js"></script>
<script src="/src/client/app/layout/ht-sidebar.directive.js"></script>
<script src="/src/client/app/layout/ht-top-nav.directive.js"></script>
<script src="/src/client/app/layout/shell.controller.js"></script>
<script src="/src/client/app/layout/sidebar.controller.js"></script>
<script src="/src/client/app/people/people.controller.js"></script>
<script src="/src/client/app/people/people.route.js"></script>
<script src="/src/client/app/widgets/ht-img-person.directive.js"></script>
<script src="/src/client/app/widgets/ht-widget-header.directive.js"></script>
<!-- endinject -->
<!-- inject:templates:js -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
If you can help me determine why my app.people module is causing the NG exception, I would appreciate.
thanks,
Bob
It took me all this time to finally run the test task, grunt test to get a clue as to what my problem what. Turns out the IIFE was missing the final () closing parenths as follows :
(function(){
'use strict';
angular.module('app.people',[
'app.core',
'app.widgets',
'app.layout'
]);
})();
Application now running successfully, which now registers the new People menu item and route:
I'm getting an error trying to use ui.router:
Uncaught Error: [$injector:modulerr] Failed to instantiate module bApp due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24stateProvider
at REGEX_STRING_REGEXP (http://localhost:9000/bower_components/angular/angular.js:68:12)
at http://localhost:9000/bower_components/angular/angular.js:4284:19
at getService (http://localhost:9000/bower_components/angular/angular.js:4432:39)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4464:13)
at runInvokeQueue (http://localhost:9000/bower_components/angular/angular.js:4379:35)
at http://localhost:9000/bower_components/angular/angular.js:4388:11
at forEach (http://localhost:9000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:9000/bower_components/angular/angular.js:4369:5)
at createInjector (http://localhost:9000/bower_components/angular/angular.js:4294:11)
at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1655:20)
http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=bApp&p1=Error%3A%20…F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1655%3A20)
angular.module('bApp', ['ui.router']);
angular.module('bApp').config(function($stateProvider, $urlRouterProvider) {
urlRouterProvider.otherwise('/');
$stateProvider
.state('main', {
url: "/",
templateUrl: "/views/main.html"
})
.state('register', {
url: "/register",
templateUrl: "/views/register.html"
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap-hero.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
</head>
<body ng-app="bApp">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#/">b</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="main">Home</a></li>
<li><a ui-sref="register">Register</a></li>
</ul>
</div>
</div>
</div>
<div ui-view></div>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/register.js"></script>
<script src="scripts/app.config.js"></script>
<!-- endbuild -->
</div>
</body>
</html>
I'm trying to use ui.router but it is failing.
Because your angular script tags are in the html head, there is slight chance that not all modules are done loading when they are being used.
According to Where should I put <script> tags in HTML markup?, you have two options here:
1. Add a defer to your script tags in the head, which might not work for all browsers:
<script src="bower_components/jquery/dist/jquery.js" defer></script>
<script src="bower_components/angular/angular.js" defer></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js" defer></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js" defer></script>
2. Put them at the bottom of your body. This will work for all browsers.
...
<script src="bower_components/jquery/dist/jquery.js" defer></script>
<script src="bower_components/angular/angular.js" defer></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js" defer></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js" defer></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/register.js"></script>
<script src="scripts/app.config.js"></script>
<!-- endbuild -->
</div>
</body>
try to install angular router without ui
https://github.com/angular/bower-angular-route
don't forget include it in project then.
<script src="/js/bower_components/angular-route/angular-route.js"></script>
I am having trouble with ngRoute. Everything looks to be spelled correctly, and I believe my syntax is correct. Pages are not routing and I am getting the injector:modulerr error.
Index.html:
<body ng-app='creativeBillingApp' >
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
**<script src="bower_components/angular-route/angular-route.js"></script>**
<script src="bower_components/plugins/jquery.slimscroll.min.js"></script>
<script src="bower_components/plugins/jquery.easing.min.js"></script>
<script src="bower_components/plugins/appear/jquery.appear.js"></script>
<script src="bower_components/plugins/jquery.placeholder.js"></script>
<script src="bower_components/plugins/fastclick.js"></script>
routes.js
use strict';
var app = angular.module('creativeBillingApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/carriers', {
templateUrl: 'views/carriers.html',
controller: 'MainCtrl'
})
.otherwise({redirectTo: '/'});
}])
app.js
'use strict';
angular.module('creativeBillingApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
]);
complete index.html:
<!DOCTYPE HTML>
<html ng-app='creativeBillingApp' class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="bower_components/www/css/font-awesome.css">
<link rel="stylesheet" href="bower_components/www/css/themify-icons.css"/>
<link rel="stylesheet" href="bower_components/www/css/animate.min.css"/>
<link rel="stylesheet" href="bower_components/www/css/skins/palette.css"/>
<link rel="stylesheet" href="bower_components/www/css/fonts/font.css"/>
<link rel="stylesheet" href="bower_components/www/css/main.css"/>
<script src="bower_components/www/plugins/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<!-- main content -->
<div class="mainContainer" ng-view></div>
<!-- /main content -->
</section>
</div>
</script>
<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- endbuild -->
<!-- build:js(.) 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/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/plugins/jquery.slimscroll.min.js"></script>
<script src="bower_components/plugins/jquery.easing.min.js"></script>
<script src="bower_components/plugins/appear/jquery.appear.js"></script>
<script src="bower_components/plugins/jquery.placeholder.js"></script>
<script src="bower_components/plugins/fastclick.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/routes.js"></script>
<script src="scripts/offscreen.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/filters/reverse.js"></script>
<script src="scripts/controllers/account.js"></script>
<script src="scripts/controllers/user.js"></script>
<!-- endbuild -->
</body>
</html>
This is the error I am getting:
GET http://localhost:9000/bower_components/www/css/main.css.map 404 (Not Found) (index):220
Uncaught Error: [$injector:modulerr] Failed to instantiate module creativeBillingApp due to:
TypeError: undefined is not a function
at http://localhost:9000/scripts/routes.js:30:8
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:3869:17)
at http://localhost:9000/bower_components/angular/angular.js:3788:37
at Array.forEach (native)
at forEach (http://localhost:9000/bower_components/angular/angular.js:323:11)
at loadModules (http://localhost:9000/bower_components/angular/angular.js:3775:5)
at createInjector (http://localhost:9000/bower_components/angular/angular.js:3715:11)
at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1379:20)
at bootstrap (http://localhost:9000/bower_components/angular/angular.js:1394:12)
at angularInit (http://localhost:9000/bower_components/angular/angular.js:1307:5)
http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=creativeBillingApp…2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1307%3A5) angular.js:78
Your app name creativeBillingApp should be registered one time.
Remove the following line from routes.php and check
var app = angular.module('creativeBillingApp', ['ngRoute']);
Since, app is a global variable and you can use it directly in routes.js
Note: routes.js should call after app.js
Working demo: http://plnkr.co/edit/dZ9AY0qIXD7YJD1UAt3C?p=preview
My index.html has:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="/public/stylesheets/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="WebApp">
<base href="/app">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container" ng-view=""></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<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-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="/app/bower_components/angular/angular.js"></script>
<!-- build:js /app/scripts/angular.js -->
<script src="/app/bower_components/angular-route/angular-route.js"></script>
<script src="/app/bower_components/angular-resource/angular-resource.js"></script>
<script src="/app/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="/app/bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) /app/scripts/scripts.js -->
<script src="/app/scripts/app.js"></script>
<script src="/app/scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
All of my angular code is in a app directory from the top level. My Gruntfile.coffee is:
useminPrepare:
html: "<%= appConfig.app %>/index.html"
options:
dest: "<%= appConfig.dist %>"
usemin:
html: "<%= appConfig.dist %>/*.html"
css: ["<%= appConfig.dist %>/styles/**/*.css"]
options:
dirs: ["<%= appConfig.dist %>"]
But I'm getting an error:
Running "useminPrepare:html" (useminPrepare) task
Going through app/index.html to update the config
Looking for build script HTML comment blocks
Warning: An error occurred while processing a template (Cannot read property 'src' of undefined). Use --force to continue.
What am I doing wrong?
I think your problem is, that you want to concat/minify the angular sources. The documented way is to use the provided files like angular-route.min.js and include them in the head section of your html.
So, following lines throws that error:
<script src="/app/bower_components/angular/angular.js"></script>
<!-- build:js /app/scripts/angular.js -->
<script src="/app/bower_components/angular-route/angular-route.js"></script>
<script src="/app/bower_components/angular-resource/angular-resource.js"></script>
<script src="/app/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="/app/bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
As a side note: these angular libs heave heavy complex sourcecode in some parts, its quite a challenge to exactly configure your personal minifier, like the angular developers did with theirs, to provide the public angular-xxxxx.min.js files.
If I understand correctly, your index.html file is in the app directory, so you may try to use relative links to scripts in your html.
<!-- build:js scripts/angular.js -->
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->