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>
Related
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 am able to render the view for userForm.html but I keep getting an error saying:
angular.js:12722 Error: [ng:areq] Argument 'userFormController' is not a function, got undefined
The controller in question is userFormController just like the above error displays.
userFormController
angular.module('myApp')
.controller('userFormController',['$scope', function($scope){
console.log('You are in the userFormController');
}]);
configuration.js
angular.module('myApp').
config(function($routeProvider) {
$routeProvider.when('/',{
templateUrl: "pages/mainPage/mainPage.html",
controller:"mainPageController"
})
.when('/userForm',{
templateUrl: 'pages/userForm/userForm.html',
controller: 'userFormController'
})
.when('',{
templateUrl:'',
controller:''
})
.otherwise({redirectTo:'/'});
});
index.html
<body ng-app="myApp">
<!--[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]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="pages/mainPage/mainPageController.js"></script>
<script src="configuration.js"></script>
</body>
</html>
mainPage.html
<div>
<h2>Hello World</h2>
<button onclick="window.location.href= '#/userForm' ">Next Page</button>
</div>
where are your userFormController.js in script tags ?
You need to include your userFormController.js file in your index.html like this:
<body ng-app="myApp">
<!--[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]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="pages/mainPage/mainPageController.js"></script>
<script src="pages/userForm/userFormController.js"></script>
<script src="configuration.js"></script>
</body>
</html>
I'm trying to load arc from the Strongloop API.
But it fails to load.
I've created my DB and retrieved datas from it but The arc HTML page gives me the following error:
Error: [$injector:modulerr] Failed to instantiate module Arc due to: >[$injector:modulerr] Failed to instantiate module Metrics due to:
[$injector:nomod] Module 'Metrics' 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.3.16/$injector/nomod?p0=Metrics
minErr/<#http://localhost:60261/scripts/vendor/angular/angular.js:63:12
module/<#http://localhost:60261/scripts/vendor/angular/angular.js:1778:1
ensure#http://localhost:60261/scripts/vendor/angular/angular.js:1702:38
module#http://localhost:60261/scripts/vendor/angular/angular.js:1776:1
loadModules/<#http://localhost:60261/scripts/vendor/angular/angular.js:4131:22
forEach#http://localhost:60261/scripts/vendor/angular/angular.js:326:11
loadModules#http://localhost:60261/scripts/vendor/angular/angular.js:4115:5
loadModules/<#http://localhost:60261/scripts/vendor/angular/angular.js:4132:40
forEach
<!DOCTYPE html>
<html>
<head>
<title>StrongLoop Arc</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="./style/ng-grid.min.css">
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="./style/jquery.contextMenu.css">
<link rel="stylesheet" type="text/css" href="./style/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./style/style.css">
<!--<link rel="stylesheet" type="text/css" href="./style/src/explorer.css">-->
</head>
<body ng-app="Arc" ng-controller="ArcMainController" ng-click="pageClick($event)"
class="ui-theme">
<div class="headerContainer" data-id="AppHeaderContainer">
<div class="branding">
<a ui-sref="home"><img src="./images/strongloop.svg" alt="Strongloop logo" class="logo"></a>
</div>
<sl-app-selector></sl-app-selector>
<div class="navButtons">
<ul>
<li ng-show="isAuthUser()">
<div sl-pm-app-controller-menu class="header-pm-app-control-menu-item"></div>
</li>
<li class="header-help-container" ng-show="helpId">
<sl-popover-help name="{{helpId}}" position="left" iconclass="icon icon-documentation"></sl-popover-help>
</li>
<li>
<span class="dropdown" dropdown on-toggle="toggled(open)" data-id="ArcAccountDropdown" title="logout">
<a href class="dropdown-toggle" dropdown-toggle><i class="icon icon-menu"></i></a>
<ul class="dropdown-menu" dropdown-menu>
<li lb-login-nav-item></li>
<li sl-user-logout-nav-item></li>
<li lb-register-nav-item></li>
<li><a ui-sref="licenses">licenses</a></li>
</ul>
</span>
</li>
</ul>
</div>
<div class="header-version"></div>
</div>
<sl-message-global></sl-message-global>
<div ui-view autoscroll="false" class="app-module-container"></div>
<!-- growl notification placeholder -->
<div growl></div>
<!-- version injector (display the version ASAP) -->
<script src="./scripts/version.js"></script>
<!-- jquery -->
<script src="./scripts/vendor/jquery/dist/jquery.js"></script>
<script src="./scripts/vendor/jquery-ui/jquery-ui.js"></script>
<script src="./scripts/lib/jquery/jquery.contextMenu.js"></script>
<!--<script src="./scripts/vendor/jQuery-contextMenu/src/jquery.contextMenu.js"></script>-->
<script src="./scripts/vendor/jquery.transit/jquery.transit.js"></script>
<!-- angular -->
<script src="./scripts/vendor/angular/angular.js"></script>
<script src="./scripts/vendor/lodash/lodash.js"></script>
<!-- react -->
<script src="./scripts/vendor/react/react-with-addons.js"></script>
<!-- d3 -->
<script src="./scripts/modules/tracing/tracing.viz.module.js"></script>
<script src="./scripts/vendor/d3/d3.js"></script>
<script src="./scripts/vendor/d3-tip/index.js"></script>
<!-- nvd3 -->
<script src="./scripts/vendor/nvd3/build/nv.d3.js"></script>
<!-- string -->
<script src="./scripts/vendor/stringjs/dist/string.js"></script>
<!-- inflection -->
<script src="./scripts/vendor/inflection/lib/inflection.js"></script>
<!-- chance -->
<script src="./scripts/vendor/chance/chance.js"></script>
<!-- spin -->
<script src="./scripts/vendor/spin.js/spin.js"></script>
<!-- moment -->
<script src="./scripts/vendor/moment/moment.js"></script>
<script src="./scripts/vendor/angular-moment/angular-moment.js"></script>
<!-- tracing vendor -->
<script src="./scripts/vendor/numeraljs/numeral.js"></script>
<script src="./scripts/lib/tracing/pretty.js"></script> <!-- ./lib -->
<!-- lb services -->
<script src="./scripts/modules/common/workspace.services.js"></script>
<script src="./scripts/modules/common/lb-build.js"></script>
<script src="./scripts/modules/common/arc-services.js"></script>
<!-- angular plugins and directives -->
<script src="./scripts/vendor/angular-ui-utils/ui-utils.js"></script>
<script src="./scripts/vendor/ng-file-upload/ng-file-upload.js"></script>
<script src="./scripts/vendor/ng-file-upload-shim/ng-file-upload-shim.js"></script>
<!--<script src="./scripts/modules/common/pm-services.js"></script>-->
<script src="./scripts/vendor/angular-ui-slider/src/slider.js"></script>
<script src="./scripts/vendor/angular-nvd3/dist/angular-nvd3.js"></script>
<script src="./scripts/vendor/angular-cookies/angular-cookies.js"></script>
<script src="./scripts/vendor/angular-animate/angular-animate.js"></script>
<script src="./scripts/vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./scripts/vendor/angular-touch/angular-touch.js"></script>
<script src="./scripts/vendor/angular-spinner/angular-spinner.js"></script>
<script src="./scripts/vendor/angular-sanitize/angular-sanitize.js"></script>
<script src="./scripts/vendor/ng-grid/build/ng-grid.js"></script>
<script src="./scripts/lib/angular/ng-grid-flexible-height.js"></script>
<script src="./scripts/vendor/checklist-model/checklist-model.js"></script>
<script src="./scripts/vendor/angular-bootstrap/ui-bootstrap.js"></script>
<script src="./scripts/vendor/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./scripts/vendor/angular-resource/angular-resource.js"></script>
<script src="./scripts/vendor/angular-growl/build/angular-growl.js"></script>
<script src="./scripts/vendor/angular-file-upload/angular-file-upload.js"></script>
<script src="./scripts/vendor/ng-clip/dest/ng-clip.min.js"></script>
<script src="./scripts/vendor/zeroclipboard/dist/ZeroClipboard.js"></script>
<!-- sl ui -->
<script src="./scripts/sl.ui.js"></script>
<script src="./scripts/modules/ui/ui.module.js"></script>
<script src="./scripts/modules/ui/ui.directives.js"></script>
<!-- arc -->
<script src="./scripts/modules/arc/arc.module.js"></script>
<script src="./scripts/modules/arc/arc.controllers.js"></script>
<script src="./scripts/modules/arc/arc.directives.js"></script>
<script src="./scripts/modules/arc/arc.services.js"></script>
<script src="./scripts/modules/arc/arc.react.js"></script>
<!-- composer -->
<script src="./scripts/modules/composer/composer.module.js"></script>
<script src="./scripts/modules/composer/composer.controllers.js"></script>
<script src="./scripts/modules/composer/composer.directives.js"></script>
<script src="./scripts/modules/composer/composer.services.js"></script>
<script src="./scripts/modules/composer/composer.react.js"></script>
<!-- build-deploy -->
<script src="./scripts/modules/build-deploy/build-deploy.module.js"></script>
<script src="./scripts/modules/build-deploy/build-deploy.controllers.js"></script>
<script src="./scripts/modules/build-deploy/build-deploy.directives.js"></script>
<script src="./scripts/modules/build-deploy/build-deploy.services.js"></script>
<!-- common -->
<script src="./scripts/modules/common/common.module.js"></script>
<script src="./scripts/modules/common/common.react.js"></script>
<script src="./scripts/modules/common/common.controllers.js"></script>
<script src="./scripts/modules/common/common.directives.js"></script>
<script src="./scripts/modules/common/common.services.js"></script>
<script src="./scripts/modules/common/common.filters.js"></script>
<script src="./scripts/modules/common/common.factories.js"></script>
<!-- profiler -->
<script src="./scripts/modules/profiler/profiler.module.js"></script>
<script src="./scripts/modules/profiler/profiler.controllers.js"></script>
<script src="./scripts/modules/profiler/profiler.directives.js"></script>
<script src="./scripts/modules/profiler/profiler.services.js"></script>
<!-- arc-user -->
<script src="./scripts/modules/arc-user/arc-user.module.js"></script>
<script src="./scripts/modules/arc-user/arc-user.controllers.js"></script>
<script src="./scripts/modules/arc-user/arc-user.services.js"></script>
<script src="./scripts/modules/arc-user/arc-user.react.js"></script>
<script src="./scripts/modules/arc-user/arc-user.directives.js"></script>
<script src="./scripts/modules/arc-user/arc-user.auth.factory.js"></script>
<!-- model -->
<script src="./scripts/modules/model/model.module.js"></script>
<script src="./scripts/modules/model/model.react.js"></script>
<script src="./scripts/modules/model/model.controllers.js"></script>
<script src="./scripts/modules/model/model.services.js"></script>
<script src="./scripts/modules/model/model.directives.js"></script>
<!-- datasource -->
<script src="./scripts/modules/datasource/datasource.module.js"></script>
<script src="./scripts/modules/datasource/datasource.react.js"></script>
<script src="./scripts/modules/datasource/datasource.controllers.js"></script>
<script src="./scripts/modules/datasource/datasource.services.js"></script>
<script src="./scripts/modules/datasource/datasource.directives.js"></script>
<!-- ia -->
<script src="./scripts/modules/ia/ia.module.js"></script>
<script src="./scripts/modules/ia/ia.react.js"></script>
<script src="./scripts/modules/ia/ia.controllers.js"></script>
<script src="./scripts/modules/ia/ia.services.js"></script>
<script src="./scripts/modules/ia/ia.directives.js"></script>
<!-- pm -->
<script src="./scripts/modules/pm/pm.module.js"></script>
<script src="./scripts/modules/pm/pm.controllers.js"></script>
<script src="./scripts/modules/pm/pm.services.js"></script>
<script src="./scripts/modules/pm/pm.directives.js"></script>
<!-- property -->
<script src="./scripts/modules/property/property.module.js"></script>
<script src="./scripts/modules/property/property.react.js"></script>
<script src="./scripts/modules/property/property.controllers.js"></script>
<script src="./scripts/modules/property/property.services.js"></script>
<script src="./scripts/modules/property/property.directives.js"></script>
<!-- explorer -->
<script src="./scripts/modules/explorer/explorer.module.js"></script>
<!--
<script src="./scripts/modules/explorer/explorer.react.js"></script>
<script src="./scripts/modules/explorer/explorer.controllers.js"></script>
-->
<script src="./scripts/modules/explorer/explorer.services.js"></script>
<!--
<script src="./scripts/modules/explorer/explorer.directives.js"></script>
-->
<!-- landing -->
<script src="./scripts/modules/landing/landing.module.js"></script>
<script src="./scripts/modules/landing/landing.services.js"></script>
<script src="./scripts/modules/landing/landing.controllers.js"></script>
<script src="./scripts/modules/landing/landing.directives.js"></script>
<!-- metrics -->
<script src="./scripts/modules/metrics/metrics.module.js"></script>
<script src="./scripts/modules/metrics/metrics.services.js"></script>
<script src="./scripts/modules/metrics/metrics.controllers.js"></script>
<script src="./scripts/modules/metrics/metrics.react.js"></script>
<script src="./scripts/modules/metrics/metrics.directives.js"></script>
<!-- manager -->
<script src="/manager/client.js"></script>
<script src="./scripts/modules/manager/manager.module.js"></script>
<script src="./scripts/modules/manager/manager.services.js"></script>
<script src="./scripts/modules/manager/manager.controllers.js"></script>
<script src="./scripts/modules/manager/manager.directives.js"></script>
<!-- tracing -->
<!--<script src="./scripts/modules/tracing/tracing.viz.module.js"></script>-->
<script src="./scripts/modules/tracing/tracing.module.js"></script>
<script src="./scripts/modules/tracing/tracing.services.js"></script>
<script src="./scripts/modules/tracing/tracing.controllers.js"></script>
<script src="./scripts/modules/tracing/tracing.directives.js"></script>
<!-- discovery -->
<script src="./scripts/modules/discovery/discovery.module.js"></script>
<script src="./scripts/modules/discovery/discovery.controllers.js"></script>
<script src="./scripts/modules/discovery/discovery.services.js"></script>
<script src="./scripts/modules/discovery/discovery.directives.js"></script>
<!-- styleguide -->
<script src="./scripts/modules/styleguide/styleguide.module.js"></script>
<script src="./scripts/modules/styleguide/styleguide.services.js"></script>
<script src="./scripts/modules/styleguide/styleguide.directives.js"></script>
<script src="./scripts/modules/styleguide/styleguide.controllers.js"></script>
<!-- licensing -->
<script src="./scripts/modules/licenses/licenses.module.js"></script>
<script src="./scripts/modules/licenses/licenses.services.js"></script>
<!--<script src="./scripts/modules/licenses/licenses.directives.js"></script>-->
<script src="./scripts/modules/licenses/licenses.controllers.js"></script>
<!-- API analytics -->
<script src="./scripts/modules/api-analytics/api.analytics.module.js"></script>
<script src="./scripts/modules/api-analytics/api.analytics.controllers.js"></script>
<script src="./scripts/modules/api-analytics/api.analytics.directives.js"></script>
<script src="./scripts/modules/api-analytics/api.analytics.services.js"></script>
<!-- angular-segmentio -->
<script src="./scripts/vendor/angular-segmentio/angular-segmentio.js"></script>
<!-- segment.io -->
<script src="./scripts/lib/segmentio/segmentio.js"></script>
</body>
</html>
I've installed strong-arc via npm doing as so:
npm install strong-arc
What can I do?
Thanks in advance for your feedback,
I resolved the issue by Using Chrome.
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 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.