I have an error like this:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=myApp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)
this is my index.html
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="" name="description">
<meta content="" name="author">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-animate.js"></script>
<!-- CORE CSS FRAMEWORK - START -->
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" media="screen">
<link href=" assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" type="text/css">
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
<script src="assets/app.js"></script>
<script src="assets/approute.js"></script>
<script src="assets/js/controller/logincontroller.js"></script>
<script src="assets/js/controller/dashboardcontroller.js"></script>
</head>
<body class=" ">
<div ui-view></div>
<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/pace/pace.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/plugins/viewport/viewportchecker.js"></script>
<script>
window.jQuery || document.write('<script src="assets/js/jquery-1.11.2.min.js"><\/script>');
</script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
and this is app.js
var app = angular.module("myApp", ['ui.router','ngAnimate']);
this is approute.js
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/login');
//$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: "/login",
templateUrl: "views/ui-login.html",
controller: 'LoginController',
})
.state('index-dashboard', {
url: "/index-dashboard",
templateUrl: "views/index-dashboard.html",
controller: 'DashboardController',
})
});
issued solve
I can't believe but it's work for me using
ng-app="app" to ng-app"app"
Angular JS Error: [$injector:modulerr]
Related
I started the first app with angularJs and Kendo UI, then I had an error in the console that says:
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.6.6/$injector/modulerr
at angular.min.js:7
at angular.min.js:43
at p (angular.min.js:8)
at g (angular.min.js:42)
at hb (angular.min.js:46)
at c (angular.min.js:22)
at Uc (angular.min.js:22)
at we (angular.min.js:21)
at HTMLDocument. (angular.min.js:334)
at j (jquery-3.2.1.min.js:2)
index.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="css/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<link href="css/kendo.default.mobile.min.css" rel="stylesheet" type="text/css"/>
</head>
<body ng-app="myApp" ng-controller="home">
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<p>{{ today | date }}</p>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<ul class="list-unstyled">
<li>Dash Board</li>
<li>Add Employee</li>
<li>Dummy Link</li>
</ul>
</div>
<div ng-view class="col-lg-10">
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/angular-route.min.js" type="text/javascript"></script>
<script src="js/angular-resource.min.js" type="text/javascript"></script>
<script src="js/kendo.all.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
app.js
'use strict';
var app = angular.module("myApp", ["ngRoute", 'ngResource', "ui.bootstrap", "kendo.directives"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html",
controller: "home"
})
.when("/addEmp", {
templateUrl: "addEmp.html",
controller: "addEmp"
});
});
app.controller("home", function ($scope) {
$scope.today = new Date();
});
I get an angular error : Error: [$injector:unpr] Unknown provider: $urlRouteProvider
I am using ui-router for routing
My Html Code:
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="angular.js" type="text/javascript"></script>
<script src="Controller.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body ng-app="myapp">
<div class="container">
<header ng-include="'templates/nav.html'"></header>
<div ui-view></div>
<footer ng-include="'templates/footer.html'"></footer>
</div>
</body>
My Module:
angular.module("myApp", ['ui.router'])
.config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider) {
$urlRouteProvider.otherwise('/index.html');
$stateProvider.state("home", {
url: '/',
template: "home"
});
}]);
Is there anything wrong I am doing here ?
first add ui router scripts to the index html file.
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="ui-router#0.3.1" data-semver="0.3.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
Then there is character missing in here also.
change $urlRouteProvider.otherwise('/index.html');
.config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider)
to $urlRouterProvider.otherwise('/index.html');
.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider)
Demo
You need to resolve your dependencies on other modules, for your module to work.
So rearrange your code to
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="angular.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
<script src="Controller.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body ng-app="myapp">
<div class="container">
<header ng-include="'templates/nav.html'"></header>
<div ui-view></div>
<footer ng-include="'templates/footer.html'"></footer>
</div>
</body>
And also change your dependency name from $urlRouteProvider to $urlRouterProvider
angular.module("myApp", ['ui.router'])
.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider) {
}]);
You need to call the controller.js after loading ui router reference
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="angular.js" type="text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
<script src="Controller.js" type="text/javascript"></script>
also change from
angular.module("myApp", ['ui.router'])
.config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider) {
to
angular.module("myApp", ['ui.router'])
.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider) {
I seem to be having an issue with Angular routing. My current index.html file is only displaying the header div that is in the index.html file but not the ng-view aspect of the code which should display a new page located at views/login.html.
var app = angular.module('Bandit', ['ngRoute']);
app.config(['$routeProvider', 'locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
//login feedback page
.when('/feedback', {
templateUrl: 'views/loginfeedback.html',
controller: 'loginFeedbackController'
})
// home page
.when('/', {
templateUrl: 'views/login.html',
controller: 'loginController'
})
//Catch all
.otherwise({
redirectTo: '/'
});
}
]);
<!DOCTYPE html>
<html lang="ENG">
<head>
<title>Band-it</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Imported Style-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Custome Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/universal.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<!--Imported JS Libraries-->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Custom-->
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/loginController.js"></script>
</head>
<body ng-app="Bandit">
<div class='header'>
<h1 id='symbol'>B</h1>
</div>
<!--Angular Dynamic View-->
<div ng-view></div>
</body>
</html>
The error message from the console that I am getting is:
angular.js:38 Uncaught Error: [$injector:modulerr] [http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=Bandit&p1=Error%3A%…Fbandit%2FBanditMask%2Fpublic%2Flibs%2Fangular%2Fangular.min.js%3A39%3A222]1
Any help would be much appreciated!
Use $locationProvider instead of using locationProvider in app.config. and not sure please share the link.
I am trying to use html5Mode for removing # from the url in SPAs. I got error while use $locationProvider in angularjs v 1.3.14.
I don't know why it's happening.i have mention below with code and my console error.
Front End:
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.min.js"></script>
<script src="app/controller.js"></script>
</head>
<body ng-controller="sample-controller" class="container">
<div ng-view></div>
</body>
</html>
My Controller:
var app=angular.module('app',['ngRoute','ngCookies']);
app.config(['$routeProvider','$locationProvider','$httpProvider',function($routeProvider, $locationProvider, $httpProvider){
$routeProvider
.when('/', {
templateUrl : "/angular-practice/route/family.html",
controller : "sample-controller"
})
.when('/login', {
templateUrl : "/angular-practice/route/login.html",
controller : "sample-controller"
})
.when('/oops', {
templateUrl : "/angular-practice/route/oops.html",
controller : "sample-controller"
})
.otherwise({ redirectTo: '/oops',controller : "sample-controller" });
//$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$httpProvider.defaults.timeout = 5000;
$locationProvider.html5Mode(true);
}]);
Console Error
Error: [$location:nobase] http://errors.angularjs.org/1.3.14/$location/nobase
M/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
Me/this.$get<#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:98:414
You need ta add:
<base href="/">
in the head section of your main html file. This is because Angular requires you to specify the url base when setting "$locationProvider.html5Mode(true);". You can read about it in the documentation here: https://docs.angularjs.org/guide/$location.
Your html file should look like this to work:
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<base href="/">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.min.js"></script>
<script src="app/controller.js"></script>
</head>
<body ng-controller="sample-controller" class="container">
<div ng-view></div>
</body>
</html>
I looked at other entries and problems people got faced and tried to solve mine but could not succeed. Somehow, I think I miss sth.
My html file looks like:
<!doctype html>
<html ng-app="IssueArchiver">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="javascripts/angular-multi-select.js"></script>
<script type="text/javascript" src="javascripts/nw-fileDialog.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="stylesheets/angular-multi-select.css">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Issue Archiver V1.0</title>
<link rel="stylesheet" type="text/css" media="all" href="stylesheets/IssueArchiver.css">
<script type="text/javascript" src="javascripts/IssueArchiver.js"></script>
</head>
<body>
<div ng-controller="IssueArchiverCtrl" >
...
</div>
</body>
</html>
My IssueArchiver.js source file looks like:
angular.module('IssueArchiver', ['multi-select'], ['DWand.nw-fileDialog'], ['ngRoute'])
.controller('IssueArchiverCtrl',['$scope', '$http', '$parse', 'fileDialog', function($scope, $http, $parse, fileDialog) {
....
}]);
I get this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.28/$injector/modulerp0=IssueArchiver&p1=E…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.28%2Fangular.min.js%3A36%3A309)
Thanks !
Module dependencies should go into one array:
angular.module('IssueArchiver', ['multi-select', 'DWand.nw-fileDialog', 'ngRoute'])