I know there are a million of these questions, and I've been coding with AngularJS for a while, but this one is unusual.
2 weeks ago I deployed a website for a client and everything was working beautifully. Then the client decided he wants a small change, so before making the changes I ran the website on a local server just to make sure everything is ok.
Then this error pops up... I have no clue what it means, and I haven't made any changes to the code. It's the same as the deployed site which runs perfectly. Would anyone know what this error means by any chance?
Failed to instantiate module crsportal due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=c...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:40:134
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:39:222)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:39:391
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:39:222)
at db (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:43:246)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:20:359
I can give you the code, because perhaps I changed something without realizing it.
crsportal.js
(function () {
'use strict';
angular
.module('crsportal', [
'crs.authentication',
'crs.config',
'crs.routes',
'crs.profiles.controllers',
'profile.services',
'route.controller'
]);
angular
.module('crs.config', []);
angular
.module('crs.profiles.controllers', []);
angular
.module('crs.routes', ['ngRoute']);
angular
.module('profile.services', []);
angular
.module('route.controller', []);
angular
.module('crsportal')
.run(run);
run.$inject = ['$http'];
/**
* #name run
* #desc Update xsrf $http headers to align with Django's defaults
*/
function run($http) {
$http.defaults.xsrfHeaderName = 'X-CSRFToken';
$http.defaults.xsrfCookieName = 'csrftoken';
}
})();
index.html
<!DOCTYPE html>
<html>
<head>
<title>CRS Client Portal</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The HTML5 Shim is required for older browsers, mainly older versions IE -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" />
</div>
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-84093208-1', 'auto');
ga('send', 'pageview');
</script>
{% include 'stylesheets.html' %}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body ng-app="crsportal" class="loginpage">
<div class="container-fluid" ng-controller="LoginController as vm">
{% include 'login.html' %}
</div>
{% include 'javascripts.html' %}
</body>
</html>
Edit: Added Info
authentication.module.js
(function () {
'use strict';
angular
.module('crs.authentication', [
'authentication.controllers',
'authentication.services'
]);
angular
.module('authentication.controllers', []);
angular
.module('authentication.services', ['ngCookies']);
})();
javascripts.html
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/material.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/ripples.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/underscore/underscore.js' %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-cookies.js"></script>
<script type="text/javascript" src="{% static 'bower_components/ngDialog/js/ngDialog.js' %}"></script>
<script type="text/javascript" src="{% static 'lib/snackbarjs/snackbar.min.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/crsportal.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/config.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/routes.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/authentication.module.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/services/authentication.services.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/controllers/login.controller.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/controllers/logout.controller.js' %}"></script>
Make sure there is a definition for crs.authentication:
//i added this
angular.module('crs.authentication', []);
angular
.module('crs.config', []);
angular
.module('crs.profiles.controllers', []);
//make sure no other module references ngRoute or this could be a problem as well. if it does add it as a depenency
angular
.module('crs.routes', ['ngRoute']);
angular
.module('profile.services', []);
angular
.module('route.controller', []);
//i moved this to last
angular
.module('crsportal', [
'crs.authentication',
'crs.config',
'crs.routes',
'crs.profiles.controllers',
'profile.services',
'route.controller'
]);
Fiddle that shows this works: http://jsfiddle.net/ncapito/ku3c33bj/
You are missing the "crs.authentication" module it has not been instantiated by the time you run
angular
.module('crsportal', [
'crs.authentication',
'crs.config',
'crs.routes',
'crs.profiles.controllers',
'profile.services',
'route.controller'
]);
See AngularJS: Uncaught Error: [$injector:modulerr] Failed to instantiate module?
Related
Index.html it is the main html page
I am not able to load views in angularjs though ui-route and provider seems working fine ....here is the piece of code
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(client) app/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,client}) app/app.css -->
<link rel="stylesheet" type="stylesheet" href="app/app.css">
<!-- injector:css -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
</head>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js({client,node_modules}) app/vendor.js -->
<!-- bower:js -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.js"></script>
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.js"></script>
<script type="text/javascript" src="bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="bower_components/angular-socket-io/socket.js"></script>
<script type="text/javascript" src="bower_components/braintree-angular/dist/braintree-angular.js"></script>
<script type="text/javascript" src="bower_components/lodash/dist/lodash.compat.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload/ng-file-upload.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload-shim/ng-file-upload-shim.js"></script>
<script type="text/javascript" src="bower_components/ngCart/dist/ngCart.js"></script>
<!-- endbower -->
<script type="javascript" src="socket.io-socket.io.js"></script>
<!-- endbuild -->
<!-- build:js(.tmp) app/app.js -->
<!-- injector:js -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/account/account.js"></script>
<script type="text/javascript" src="app/account/login/login.controller.js"></script>
<script type="text/javascript" src="app/account/settings/settings.controller.js"></script>
<script type="text/javascript" src="app/account/signup/signup.controller.js"></script>
<script type="text/javascript" src="app/admin/admin.controller.js"></script>
<script type="text/javascript" src="app/admin/admin.js"></script>
<script type="text/javascript" src="app/main/main.controller.js"></script>
<script type="text/javascript" src="app/main/main.js"></script>
<script type="text/javascript" src="app/products/products.controller.js"></script>
<script type="text/javascript" src="app/products/products.js"></script>
<script type="text/javascript" src="app/products/products.service.js"></script>
<script type="text/javascript" src="components/auth/auth.service.js"></script>
<script type="text/javascript" src="components/auth/user.service.js"></script>
<script type="text/javascript" src="components/footer/footer.directive.js"></script>
<script type="text/javascript" src="components/modal/modal.service.js"></script>
<script type="text/javascript" src="components/mongoose-error/mongoose-error.directive.js"></script>
<script type="text/javascript" src="components/navbar/navbar.controller.js"></script>
<script type="text/javascript" src="components/navbar/navbar.directive.js"></script>
<script type="text/javascript" src="components/sidebar/sidebar.controller.js"></script>
<script type="text/javascript" src="components/sidebar/sidebar.service.js"></script>
<script type="text/javascript" src="components/socket/socket.service.js"></script>
<!-- endinjector -->
<!-- endbuild -->
<!-- endinjector -->
<!-- endbuild -->
<body ng-app="meanshopApp">
<!--[if lt IE 7]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div ui-view></div>
</body>
</html>
I an not able to load views in angularjs though ui-route and provider seems working fine ....here is the piece of code
app.js
var app=angular.module('meanshopApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'btford.socket-io',
'ui.router',
'ui.bootstrap',
'ngFileUpload',
'ngCart',
'braintree-angular'
])
app.config(["$stateProvider", "$urlRouterProvider","$locationProvid","$httpProvider",
function ($stateProvider, $urlRouterProvider,$locationProvider, $httpProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('/', {
url: "",
templateUrl: 'app/main/main.html',
controller :'MainCtrl'
})
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
}]);
app.factory('authInterceptor', function($rootScope, $q, $cookies, $injector) {
var state;
return {
// Add authorization token to headers
request: function(config) {
config.headers = config.headers || {};
if ($cookies.get('token')) {
config.headers.Authorization = 'Bearer ' + $cookies.get('token');
}
return config;
},
// Intercept 401s and redirect you to login
responseError: function(response) {
if (response.status === 401) {
(state || (state = $injector.get('$state'))).go('login');
// remove any stale tokens
$cookies.remove('token');
return $q.reject(response);
}
else {
return $q.reject(response);
}
}
};
})
app.run(function($rootScope, $state, Auth) {
// Redirect to login if route requires auth and the user is not logged in
// also if the user role doesn't match with the one in `next.authenticate`
$rootScope.$on('$stateChangeStart', function(event, next) {
if (next.authenticate) {
var loggedIn = Auth.isLoggedIn(function(role) {
if (role && role === next.authenticate) {
return; // logged in and roles matches
}
event.preventDefault();
if(role) {
// logged in but not have the privileges (roles mismatch)
$state.go('onlyAdmin');
} else {
// not logged in
$state.go('login');
}
});
}
});
})
I am not able to load views in angularjs though ui-route and provider seems working fine ....here is the piece of code
main.html
<navbar></navbar>
<header class="hero-unit" id="banner">
<div class="container">
<h1>MEANshop</h1>
<p class="lead">The MEAN stack one stop shop</p>
<img src="assets/images/logo.png" alt="the meanstack shop">
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Featured Products:</h1>
<ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="product in products">
<li><a ui-sref="viewProduct({id: product._id})" tooltip="{{product.description}}">
{{product.title}} -
<span class="text-muted">{{product.price | currency}}</span>
</a></li>
</ul>
</div>
</div>
</div>
<footer></footer>
I an not able to load views in angularjs though ui-route and provider seems working fine ....here is the piece of code
maincontroller
'use strict';
angular.module('meanshopApp')
.controller('MainCtrl', function($state,$scope,$http, socket, Product) {
alert("helloeen");
$scope.products = Product.query();
});
After going through your code, i came across some issues which is basically restricting the main.html to load. Kindly fix below issues in you app.js file
$locationProvider spelling is incorrect
url while defining state should not be blank.
Do you need to enable htmlMode5 because i have faced lot of issues while enabling this.You can use $locationProvider.hashPrefix('') to make URL better;
app.config(["$stateProvider",
"$urlRouterProvider","$locationProvider","$httpProvider",
function ($stateProvider, $urlRouterProvider,$locationProvider, $httpProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('/', {
url: "/",
templateUrl: 'app/main/main.html',
controller :'MainCtrl'
})
$locationProvider.hashPrefix('');
$httpProvider.interceptors.push('authInterceptor');
}]);
<html>
<head>
<script type="text/javascript" src="js/angular/angular.js"></script>
<script type="text/javascript" src="js/angular/angular-route.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title></title>
<meta name="author" content="Stanislau">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
{{Message}}
</div>
</body>
</html>
main.js code
var app = angular.module('testApp', ['ngRoute']);
app.controller('testCtrl', function($scope){
$scope.Message = '123';
});
Error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:nomod] Module 'testApp' 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.6.1/$injector/nomod?p0=testApp
if code:
<html>
<head>
<script type="text/javascript" src="js/angular/angular.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title></title>
<meta name="author" content="Stanislau">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
{{Message}}
</div>
</body>
</html>
main.js code:
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope){
$scope.Message = '123';
});
The error is the same!!
Test version address: http://zadanie.salesdep.by/
Code is working fine.Please check the library reference path
<div ng-app="testApp" ng-controller="testCtrl">
<div ng-controller="testCtrl">
{{Message}}
</div>
</div>
<script>
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope){
$scope.Message = '123';
});
</script>
i am trying to use angular js with django server
here is the index.html
{% load staticfiles %}
<html ng-app="blog">
<head>
<script type="text/javascript" src="{% static 'js/libs/angular.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.module.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.config.js' %}"></script>
</head>
<body>
<input type="text" ng-model="name">
<p>hi , {{name}}</p>
</body>
</html>
here is app.module.js
'use strict'
angular.module('blog' , []);
here is app.config.js
'use strict'
angular.module('blog').config(function(){});
the ng-model variable name doesnt show up at all.No error occurs and nothing comes up on typing anything in the input box
What can be the case and how can i recover from it ?
Try this
html
<html>
<head>
<script type="text/javascript" src="{% static 'js/libs/angular.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.module.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.config.js' %}"></script>
</head>
<body ng-app="myBlog">
<input type="text" ng-model="name">
<p>hi , {{name}}</p>
</body>
</html>
js
'use strict';
var myBlog = angular.module('myBlog');
myBlog.config(function() {
// anything u want
});
angular module has a module registery, so you don't have to save your module somewhere. Actually you can even use IIFE pattern (Immediate Invocation Function Expression) to wrap your module definition !
My suggestion is to check weither it comes from the server itself. I mean check if your files are properly loaded !
Then wrap your logic inside a controller :
// -- my-blog.controller.js --
angular.module('blog', ['$scope', MyBlogCtrl($scope) {
}]);
in your index.html:
<html>
<head>
<script type="text/javascript" src="{% static 'js/libs/angular.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.module.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.config.js' %}"></script>
</head>
<body ng-app="myBlog">
<div ng-controller="MyBlogCtrl">
<input type="text" ng-model="name">
<p>hi , {{name}}</p>
</div>
</body>
</html>
I am trying to learn how to use AngularJS and AngularJS Material using following codes:
<!doctype html>
<html lang="en">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
<!-- default themes and core styles -->
<link rel="stylesheet"
href="bower_components/angular-material/angular-material.css">
</head>
<body ng-app="F1FeederApp">
<md-content>
<md-toolbar class="md-tall md-accent">
<h2 class="md-toolbar-tools">
<span>Toolbar: tall (md-accent)</span>
</h2>
</md-toolbar>
<ng-view></ng-view>
</md-content>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
However, the Material is not displayed. What could be wrong with my code?
Console in Browser doesn't give me any error.
Just tried your code and it works fine on Chrome, FireFox, and Safari.
By the way, you have an extra ; before your closing script tag
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
I recommend you to check your angular and angular material versions,
or check if there is a problem in your .js files.
Hey i've started learning angularJS and i'm quite new to it so i gues my best bet is to ask someone.
So my $routeProvider is not routing me to anything really when i run it it wont load any partials.
The current code i'm using.
angular.module("list" , ['ngRoute' ])
config(function ($routeProvider) {
$routeprovide.
when("/", {templateUrl:"/partials/list.html"})
})
My index.html
<!doctype html>
<html ng-app="list">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Angular Routing!</title>
</head>
<body>
<div ng-controller="AppCtrl" class="container">
<a href="#lijst">
<h2>The List!</h2>
</a>
<div ng-view> </div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
Edit: I run it by using a USBWebserver app
Console Errors:
> Failed to load resource: the server responded with a status of 404 (Not Found)
http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
Uncaught ReferenceError: config is not defined main.js:2
Uncaught Error: Bootstrap requires jQuery bootstrap.js:7
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7/$injector/modulerr?p0=list&p1=Error%3A%20…20at%20e%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular.min.js%3A29%3A115) angular.min.js:30
First of all, your angular-route.js must be included after angular itself
Second, you are using some routeprovide, and $routeProvider is injected
You should do this:
angular.module("list" , ['ngRoute' ]).
config(function ($routeProvider) {
$routeProvider.
when("/", {templateUrl:"/partials/list.html"})
});
You also forgot point before config method.
And this:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
And, it seems, your Bootstrap.js requires jQuery to be included before it.