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.
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
<!-- <script src="app.js" type="text/jsx"></script> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.22.0/aws-sdk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js" type="text/javascript"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" type="text/javascript"></script> -->
<script type="text/jsx" src="./app.js" >
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
This is the code in app.js I am running:
ReactDOM.render(<Layout />, document.getElementById('root'));
When I set to <script src="app.js" type="text/babel">, it prints nothing.
When I set to <script src="app.js" type="text/javascript">, it prints
Uncaught SyntaxError: Unexpected token <
How can I set it so that the code runs correctly?
I have a simple logout function but locally it just takes 1 second to logout while on server its taking 6 second. How can I reduce the logout time.
$scope.SignOut = function() {
$rootScope.globalSession = null;
$rootScope.globalManagerViewDisplayFlag = false;
$rootScope.globalAdminViewDisplayFlag = false;
$rootScope.globalSuperViewDisplayFlag = false;
$cookieStore.remove('Session');
$cookieStore.remove('WeAlertUserData');
// $location.path('/login');
$window.location.reload();
};
});
This is my main Index page.
<html lang="en" ng-app="W-Alert">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="">
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.js"></script>
<script src="libs/angular-cookies.min.js"></script>
<script src="libs/ui-bootstrap-tpls-2.0.0.min.js"></script>
<script src="libs/permission-ng.js"></script>
<script src="libs/transition/TransitionEventNames.js"></script>
<script src="libs/transition/TransitionEvents.js"></script>
<script src="libs/angular-permission.js"></script>
<script src="libs/angular-animate.min.js"></script>
<script src="libs/angular-uuid2.min.js"></script>
<!--Spinner-->
<script type="text/javascript" src="libs/spin.js"></script>
<script src="libs/angular-spinner.js"></script>
<!-- Toaster -->
<script type="text/javascript" src="libs/checklist-model.js"></script>
<link rel="stylesheet" type="text/css" href="libs/angular-toastr.css" />
<script type="text/javascript" src="libs/angular-toastr.tpls.js"></script>
<!--
<script src="js/config.js"></script> -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script src="libs/dirPagination.js"></script>
<script src="js/constants.js"></script>
<!-- change password controller-->
<script src="components/change-password/change-password-controller.js"></script>
<script src="components/change-password/change-password-service.js"></script>
<!-- auth controller-->
<script src="components/authentication/authenticate-service.js"></script>
<script src="components/authentication/authenticate-controller.js"></script>
<!--client -->
<script src="components/client/client-service.js"></script>
<script src="components/client/client-controller.js"></script>
<!--manager-->
<script src="components/manager/manager-service.js"></script>
<script src="components/manager/manager-controller.js"></script>
<!--application-->
<script src="components/application/application-service.js"></script>
<script src="components/application/application-controller.js"></script>
<!--group-->
<script src="components/group/group-service.js"></script>
<script src="components/group/group-controller.js"></script>
<!--user-->
<script src="components/user/user-service.js"></script>
<script src="components/user/user-controller.js"></script>
<!--client profile-->
<script src="components/profile/profile-controller.js"></script>
<!-- Bootstrap Core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- DataTables CSS -->
<link href="bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/w-alert.css" />
</head>
<body >
<span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1"></span>
<ng-include src="'layout/shell.htm'"/>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
</body>
</html>
NOTE: Server is in another country. Does this matters? If it does then what can I do to reduce the time?
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 only add two more files two more files at the end to scripts/Auth/authCtrl.js and scripts/Auth/authService.js
and all works on development but it says is missing all those files when running the dist. Please help me fins whats wrong thanks
BUG LINK
Ok I found the problem, it turns out that when I create the distribution application with grunt server:dist the index file was being copy over as it its and it did not have any reference of the minified files; so I replace all the script links for the ones minified only and all works now.
<script src="scripts/vendor.js"></script>
<script src="scripts/ui.js"></script>
<script src="scripts/app.js"></script>
instead of
<!-- 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/angular-route/angular-route.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbuild -->
<!-- build:js scripts/ui.js -->
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/jquery-spinner/dist/jquery.spinner.min.js"></script>
<script src="bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
<script src="bower_components/jquery-steps/build/jquery.steps.min.js"></script>
<script src="bower_components/toastr/toastr.min.js"></script>
<script src="bower_components/bootstrap-file-input/bootstrap.file-input.js"></script>
<script src="bower_components/jquery.slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/holderjs/holder.js"></script>
<script src="bower_components/raphael/raphael-min.js"></script>
<script src="bower_components/morris.js/morris.js"></script>
<script src="scripts/vendors/jquery.sparkline.min.js"></script>
<script src="bower_components/flot/jquery.flot.js"></script>
<script src="bower_components/flot/jquery.flot.resize.js"></script>
<script src="bower_components/flot/jquery.flot.pie.js"></script>
<script src="bower_components/flot/jquery.flot.stack.js"></script>
<script src="bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js"></script>
<script src="bower_components/flot/jquery.flot.time.js"></script>
<script src="bower_components/gauge.js/dist/gauge.min.js"></script>
<script src="bower_components/jquery.easy-pie-chart/dist/angular.easypiechart.min.js"></script>
<script src="bower_components/angular-wizard/dist/angular-wizard.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular-rangy.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular-sanitize.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="scripts/vendors/skycons.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,client}) scripts/app.js -->
<script src="scripts/app.js"></script>
<script src="scripts/shared/main.js"></script>
<script src="scripts/shared/directives.js"></script>
<script src="scripts/shared/localize.js"></script>
<script src="scripts/UI/UICtrl.js"></script>
<script src="scripts/UI/UIDirective.js"></script>
<script src="scripts/UI/UIService.js"></script>
<script src="scripts/Form/FormDirective.js"></script>
<script src="scripts/Form/FormCtrl.js"></script>
<script src="scripts/Form/FormValidation.js"></script>
<script src="scripts/Table/TableCtrl.js"></script>
<script src="scripts/Task/Task.js"></script>
<script src="scripts/Chart/ChartCtrl.js"></script>
<script src="scripts/Chart/ChartDirective.js"></script>
<script src="scripts/Auth/authCtrl.js"></script>
<script src="scripts/Auth/authService.js"></script>
<!-- endbuild -->
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