I've got this files
lib/
|-angular.min.js
|-angular-route.js
|-angular-resource.js
index.html
package.json
The main index.html
<html ng-app="example">
<head>
<meta charset="utf-8">
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<script src="lib/angular-resource.js"></script>
</head>
<body>
<script>
var app = angular.module('example', ['ngRoute']);
</script>
</body>
</html>
And the package.json
{
"main": "index.html"
, "name": "example"
, "version": "1.0.0"
, "window": {
"toolbar": true
, "frame" : true
}
}
But when I run the $ nw . it throws me this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7/$injector/moduler...
I've had similar problem with ng Animate. It has turned out that I had installed newer version of ngAnimate than angular.js which I use. So to be sure, just check versions angular and other components.
angular.js - v1.2.7
angular-route - v1.2.7
angular-resource - v1.2.7
Related
I am trying to inject a dependency in a very basic AngularJs web app,
var app = angular.module('app', ['ui-router']);
app.config(['$stateProvider','$controllerProvider', ($stateProvider, $controllerProvider) => {
$controllerProvider.allowGlobals();
$stateProvider.state('firstMessage', {
url: '/first-msg',
template: '<strong>hi this is irst msg</strong>'
});
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grid-Pract</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="./app.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.21/angular-ui-router.min.js"></script>
</head>
<body ng-app="app">
first
<div ui-view></div>
</body>
</html>
but I'm getting an this error - any help is appreciated.
enter image description here
The module name for ui router is 'ui.router', not 'ui-router'.
Try changing your code to:
var app = angular.module('app', ['ui.router']);
You will get much better error messages if you use the unminified versions of the libraries.
Use:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.21 /angular-ui-router.js
Then your error message will be:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ui-router due to:
Error: [$injector:nomod] Module 'ui-router' 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.
https://errors.angularjs.org/1.7.5/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20ui-router%20due%20to%3A%0AError%3A%20%5B%24injector%3Anomod%5D%20Module%20'ui-router'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0A%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.5%2F%24injector%2Fmodulerr%3Fp0%3Dui-router%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520Module%2520'ui-router'%2520is%2520not%2520available!%2520You%2520either%2520misspelled%2520the%2520module%2520name%2520or%2520forgot%2520to%2520load%2520it.%2520If%2520registering%2520a%2520module%2520ensure%2520that%2520you%2520specify%2520the%2520dependencies%2520as%2520the%2520second%2520argument.%250Ahttps%253A%252F%252Ferrors.angularjs.org%252F1.7.5%252F%2524injector%252Fnomod%253Fp0%253Dui-router%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A138%253A12%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A2290%253A17%250A%2520%2520%2520%2520at%2520ensure%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A2211%253A38)%250A%2520%2520%2520%2520at%2520module%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A2288%253A14)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5017%253A22%250A%2520%2520%2520%2520at%2520forEach%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A387%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5001%253A5)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5019%253A40%250A%2520%2520%2520%2520at%2520forEach%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A387%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5001%253A5)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A138%3A12%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5041%3A15%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5001%3A5)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5019%3A40%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5001%3A5)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A4918%3A19)%0A%20%20%20%20at%20doBootstrap%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A1942%3A20)%0A%20%20%20%20at%20bootstrap%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A1963%3A12)
at angular.js:138
at angular.js:5041
at forEach (angular.js:387)
at loadModules (angular.js:5001)
at createInjector (angular.js:4918)
at doBootstrap (angular.js:1942)
at bootstrap (angular.js:1963)
at angularInit (angular.js:1848)
at angular.js:36216
at HTMLDocument.trigger (angular.js:3501)
The error becomes obvious, use ui.router instead of ui-router.
̶v̶a̶r̶ ̶a̶p̶p̶ ̶=̶ ̶a̶n̶g̶u̶l̶a̶r̶.̶m̶o̶d̶u̶l̶e̶(̶'̶a̶p̶p̶'̶,̶ ̶[̶'̶u̶i̶-̶r̶o̶u̶t̶e̶r̶'̶]̶)̶;̶
var app = angular.module('app', ['ui.router']);
See AngularJS Error Reference - $injector modulerr
I am following the phoneCat tutorial[https://docs.angularjs.org/tutorial/] and decide to create a similar structured app. but I keep getting $injector:modulerr Error when I try to include a module I created.
files are arranged like this
The way I started my app is use npm package http-sever with command http-server ...\app.
Another thing I noticed is that if I use http-server command directly(rather than npm start suggested in tutorial) to start app in the app folder it also gives me error message. I am now pretty confused about this.
This is my app.module.js
'use strict';
angular.module('dota2Hero', [
'ngRoute',
'core'
]);
If I remove 'core' from dependency array, the code compiles.
Here is my index.html
<!doctype html>
<html lang="en" ng-app="dota2Hero">
<head>
<meta charset="utf-8">
<title>Dota2 Database</title>
<script src="//code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="core/hero/hero.module.js"></script>
<script src="core/core.module.js"></script>
<script src="app.module.js"></script>
<script src="core/hero/hero.service.js"></script>
<script src="app.config.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
and my core.module.js
'use strict';
angular.module('core',['core.hero']);
You need to change the order in which you load the references, load the core.module.js before loading app.module.js
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.1/angular-resource.min.js"></script>
<script src="core/hero/hero.module.js"></script>
<script src="hero-grid/hero-grid.module.js"></script>
<script src="core/core.module.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="core/hero/hero.service.js"></script>
<script src="hero-grid/hero-grid.component.js"></script>
I first tried to install ionic from npm and require it with
require('ionic')
It does not work, the npm ionic version in bundled in an browserify unknown path.
Then I installed it from bower, and added some browser-shim :
package.json
"browserify-shim": {
"ionic": "ionic"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"ionic": "./libs/ionic/release/js/ionic.js"
...
libs is my bower folder.
It looks like ionic is found by browserify. But I have the following ionic error:
Uncaught TypeError: Cannot read property 'navigator' of undefined
ionic.js is complaining that window object is null.
Do you know what I am missing for requiring correctly ionic ?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="styles/ionbio.css" media="screen" title="no title" charset="utf-8"> -->
<title>BIO by Ionic</title>
</head>
<body ng-controller="baseCtrl">
<ion-side-menus>
<h1 class="title">{{ionbio.title}}</h1>
</ion-side-menus>
<script src="js/main.js"></script>
</body>
</html>
js/main.js
'use strict';
require('ionic');
The error is due to window object which is null. And this is because of babel who is adding at some points a "use strict".
"this" is then equal to undefined.
So I disabled babel transformation as a workaround.
I`m new in AngularJS
I`m getting this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:nomod] Module 'ui.router' 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.
this is index.html file:
<!doctype html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-controller="FirstCtrl">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">{{first.greeting}}</div>
<script src="angular.js"></script>
<script src="app/app.js"></script>
<script src="js/main.js"></script>
</body>
</html>
and this is app.js file:
var app = angular.module("app", ["ui.router"]).controller("FirstCtrl", function FirstCtrl(){
var first = this;
first.greeting = "First";
});
Please help me to solve this issue
You're not loading in the ui-router script, I don't know if you have it locally or using a cdn, you just need to add it in your index.html there
for example, by adding-
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
in your index.html (this is a cdn link)
Fixed by following steps:
Installed angular-ui-router via npm
npm install angular-ui-router#0.2.18 --save
Then load the script in index.html (angular 1.5.0)
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="angular.js"></script>
This is just the core angular library, you need to either download and host the latest angular ui router library or pull it in from a CDN
see here for more details: https://github.com/angular-ui/ui-router
Can be installed via nuget
PM > Install-Package Angular.UI.UI-Router
I am using a seed project for Angular apps. There is no bower to manage the dependencies. The angular.js file is currently in the below location. Here is the index.html content:
<!doctype html>
<html lang="en" ng-app="AngularSpringApp">
<head>
<meta charset="utf-8">
<title>Service App</title>
<link rel="stylesheet" href="resources/css/app.css"/>
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div id="wrapper">
<ul class="menu">
<li>Cars</li>
<li>Trains</li>
<li>Railway Station</li>
<li>Kits</li>
</ul>
<hr class="" />
<div ng-view></div>
</div>
<script src="resources/js/lib/angular/angular.js"></script>
<script src="resources/js/app.js"></script>
<script src="resources/js/dirPagination.js"></script>
<script src="resources/js/services.js"></script>
<script src="resources/js/controllers/RailwayStationController.js"></script>
<script src="resources/js/controllers/CarController.js"></script>
<script src="resources/js/controllers/TrainController.js"></script>
<script src="resources/js/controllers/KitController.js"></script>
<script src="resources/js/filters.js"></script>
<script src="resources/js/directives.js"></script>
</body>
</html>
And here is the beginning of the app.js file:
var AngularSpringApp = angular.module('AngularSpringApp', ['angularUtils.directives.dirPagination']);
// Declare app level module which depends on filters, and services
AngularSpringApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when ...
As you can see, ngRoute module is not injected, but the the routing is working properly!
Now, I am trying to change the current angular file with new angular.js file which I downloaded from the Angular website. When replacing the angular.js file, I get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module AngularSpringApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.28/$injector/unpr?p0=%24routeProvider
at http://localhost:8084/app/resources/js/lib/angular/angular.js:78:12
at http://localhost:8084/app/resources/js/lib/angular/angular.js:3801:19
at getService (http://localhost:8084/app/resources/js/lib/angular/angular.js:3929:39)
at Object.invoke (http://localhost:8084/app/resources/js/lib/angular/angular.js:3956:13)
at http://localhost:8084/app/resources/js/lib/angular/angular.js:3884:37
at forEach (http://localhost:8084/app/resources/js/lib/angular/angular.js:325:18)
at loadModules (http://localhost:8084/app/resources/js/lib/angular/angular.js:3871:5)
at createInjector (http://localhost:8084/app/resources/js/lib/angular/angular.js:3811:11)
at doBootstrap (http://localhost:8084/app/resources/js/lib/angular/angular.js:1444:20)
at bootstrap (http://localhost:8084/app/resources/js/lib/angular/angular.js:1459:12)
http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=AngularSpringApp&p…ost%3A8084%2Fapp%2Fresources%2Fjs%2Flib%2Fangular%2Fangular.js%3A1459%3A12)
You likely also need to download and include the angular-route module after your angular.js include:
<script src="resources/js/lib/angular/angular-route.js"></script>