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:
Related
I am trying to implement angular chart with my app. I bower installed angular-chart.js and have chart.js listed as a dependency. However when I load my page I get the following error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module chart.js due to:
Error: [$injector:nomod] Module 'chart.js' 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.
My questions is this: How do I get this error to go away? I've verified that charts is being loaded before angular-chart but I'm not able to get this error to go away.
Here is my index.html:
<!--suppress ALL -->
<html lang="en" ng-app="app" ng-cloak>
<head>
<meta charset="utf-8">
<base href="/">
<!--[if IE]><link rel="shortcut icon" href="assets/img/favicon.ico"><![endif]-->
<link rel="apple-touch-icon-precomposed" href="assets/img/favicon.ico">
<link rel="icon" href="assets/img/favicon.ico">
<!-- Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta name="description"
content="Convenient, affordable online CPA and EA self-study CPE. Complete CPE courses in your spare time, on the go.">
<meta name="author" content="Learning Suite Inc">
<meta name="google-site-verification" content="3QtiwaamWrLo-A9BAx0kTgVHagRJfe0xE60hMULF12M"/>
<meta name="fragment" content="!">
<title update-title>Prolaera</title>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/pricing/pricing_v6.css" media="screen" title="no title" charset="utf-8">
<!-- Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans"/>
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-v2.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- <link rel="stylesheet" href="assets/css/headers/one.css" media="screen" title="no title" charset="utf-8"> -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/sky-forms-pro/skyforms/css/sky-forms.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
<link rel="stylesheet" href="css/sweetalert2.css">
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
<!-- Bootstrap core CSS -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Bootstrap theme -->
<link href="lib/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
<!-- Angular CSP-->
<link href="lib/angular/css/angular-csp.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/lib/html5shiv/html5shiv.min.js"></script>
<script src="/lib/respond/respond.min.js"></script>
<![endif]-->
<!-- must be before require.js -->
<script type="text/javascript" src="https://cdn.auth0.com/js/lock-9.1.min.js"></script>
<script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="lib/moment/moment.js"></script>
<script type="text/javascript" src="lib/url-template/url-template.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="js/apigClient.js"></script>
<!--jquery/bootstrap needed here for calendar and collapse navbar toggle-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/>
<!-- jquery, moment, and angular have to get included before fullcalendar -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/gcal.js"></script>
<!-- require -->
<script src="lib/require/require.js"></script>
<script type="text/javascript" src="lib/auth0-variables.js"></script>
<!-- angularjs -->
<link href="lib/angular/css/angular-csp.css" rel="stylesheet"/>
<script src="lib/angular/js/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-bootstrap-typeahead/ui-bootstrap-typeahead.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-bootstrap-toggle-switch/style/bootstrap3/angular-toggle-switch-bootstrap-3.css">
<script type="text/javascript" src="bower_components/angular-bootstrap-toggle-switch/angular-toggle-switch.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-spinkit/build/angular-spinkit.min.css">
<script src="bower_components/angular-spinkit/build/angular-spinkit.min.js"></script>
<script src="bower_components/angular-stripe-checkout/angular-stripe-checkout.js"></script>
<!
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
<script src="lib/angular/js/angular-animate.js"></script>
<script src="lib/angular/js/angular-ui-router.js"></script>
<script src="lib/angular/js/angular-ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
<script src="https://cdn.auth0.com/w2/auth0-widget-5.js"></script>
<script type="text/javascript" src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
<script src="//cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script src="//cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<script src="lib/sweetalert/SweetAlert.js"></script>
<script src="lib/sweetalert/sweetalert2.min.js"></script>
<script src="lib/smarttable/smart-table.min.js"></script>
<script src="lib/angularsanitize/angular-sanitize.min.js"></script>
<script src="lib/ng-file-upload/ng-file-upload.min.js"></script>
<script src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
<script src="//code.angularjs.org/1.2.16/angular-cookies.min.js"></script>
<!-- Uncomment for deployment and comment for dev -->
<script src="js/analytics.js"></script>
<script src="js/inspectlet.js"></script>
<!-- Unify styling -->
<link rel="stylesheet" href="assets/css/headers/header-v1.css">
<!-- CSS Page Style -->
<link rel="stylesheet" href="assets/css/pages/shortcode_timeline2.css">
<link rel="stylesheet" href="assets/css/pages/page_pricing.css">
<script src="js/app.js"></script>
<script src="js/navbar-directive.js"></script>
<script src="js/footer-directive.js"></script>
Here is beginning of my app.js:
(function() {
var app = angular.module('app', ['ngCookies', 'auth0', 'angular-jwt', 'angular-storage', 'ngFileUpload', 'ngSanitize', '19degrees.ngSweetAlert2', 'ui.router', 'ngAnimate', 'ui.bootstrap', 'angular-spinkit', 'angular.filter', 'stripe.checkout', 'ui.calendar', 'ui.bootstrap.typeahead', 'toggle-switch']);
define('app', [], function() {
return app;
});
You have to import chart.min.js - and if you want to use full version of Chart.js you have to import Chart.bundle.js which is downloadable from chart.js webpage.
I had the same issue, tried to point to a CDN and it worked fine,
Then tried to used node_modules instead of bower_components and it worked fine too !
So I believe something is wrong with the bower version ...
Hope this helps ! Let me know !
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'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.