I create my application using AngularJS. Lately, I tried to add minified scripts to project. I configured my bundles and add there scripts.
Unfortunately, after getting on my page, I saw error in console:
angularjs?v=DPp8dw32SOYLsCU70JJTuQ_I9tbCvN1g_Jgbcn9Mnx01:1 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=MyApp&p1=Error
... I read about problem with minified scripts from: http://frontendcollisionblog.com
but I did not found it in my project. Have you got any idea what can be wrong with it?
var MyApp = angular.module("MyApp", ["ui.bootstrap", "schemaForm"]);
MyApp.requires.push("ngFileUpload");
MyApp.config([
'$compileProvider', '$sceDelegateProvider', '$httpProvider',
function ($compileProvider, $sceDelegateProvider, $httpProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|sip|chrome-extension):/);
$sceDelegateProvider.resourceUrlWhitelist([
'self',
window.AppData.scriptsCdnEndpoint + '/**'
]);
$httpProvider.defaults.cache = true;
}
]);
`
Related
var myapp = angular.module('myapp', []);
myapp.config(function($interpolateProvider) {
$interpolateProvider
.startSymbol('{[')
.endSymbol(']}');
});
myapp.controller('CanvasControls', function($scope) {
function1($scope);
function2($scope);
});
This code integrate with rails and working in development fine but in production mode it gives below errors.
Failed to instantiate module myapp due to:
Uncaught Error: $injector:modulerr
/$injector/modulerr?p0=myapp
working in development fine but in production mode it gives below
errors
Guess in production you are compressing the code.And I presume you have to add $scope like this
Hope this will help
// Changed here Added String '$scope'
myapp.controller('CanvasControls',['$scope', function($scope) {
function1($scope);
function2($scope);
}]);
EDIT
If you have not modified the .config part please try by making following change.
customInterpolationApp.config(['$interpolateProvider', function($interpolateProvider){
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
}]);
More about such error
Syntax error added extra ] in controller
myapp.controller('CanvasControls', function($scope) {
function1($scope);
function2($scope);
}]);// remove ']' from here
or use mini-fist way
myapp.controller('CanvasControls', ['$scope',function($scope) {
function1($scope);
function2($scope);
}]);
and you may mismatch module name myapp in controller and in html ng-app="myapp"
I'm attempting to set up a very simple Angular single-page-application in ASP .NET 5. I've begun with an empty project - the only angular dependency at the moment is ngRoute.
The problem:
When I run the project, I get a blank page in my browser - with no errors in the developer console.
EDIT
I removed the [] from the angular.module('app', []).controller as suggested but now an error is thrown:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: a
I'm using npm, bower, and grunt - but I don't think they have anything to do with the problem.
Here's what the project structure looks like:
Here's the index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title></title>
<!-- angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-route.js"></script>
<!-- app -->
<script src="app.js"></script>
</head>
<body ng-cloak>
<div ng-view>
</div>
</body>
</html>
Here's the app.js:
(function () {
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Views/home.html',
controller: 'home'
})
.otherwise({
redirectTo: '/'
});
});
})();
Here's the home.js:
(function () {
'use strict';
angular.module('app').controller('home', function controller($scope) {
$scope.title = 'Home';
});
})();
Here's the home.html:
<div ng-controller="home">
{{ title }}
</div>
Why do I get a blank page and not the text "Home" rendered on screen?
The app.js under wwwroot contains all of the contents of the Scripts folder - with the app.js contents written first. Here's the gruntfile.js:
module.exports = function (grunt) {
// Load grunt plugins from npm.
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// Configure plugins.
grunt.initConfig({
// Combine and minify all of the javascript files from the Scripts folder into the wwwroot
// folder, making sure the app.js is placed at the beginning.
uglify: {
my_target: {
files: { "wwwroot/app.js": ["Scripts/App/app.js", "Scripts/**/*.js"] }
}
},
// Re-run the uglify task when any of the files in the Scripts folder change.
watch: {
scripts: {
files: ["Scripts/**/*.js"],
tasks: ["uglify"]
}
}
});
// Define tasks.
grunt.registerTask("default", ["uglify", "watch"]);
};
I can see that the angular.js, angular-route.js, and app.js have loaded correctly in the browser. Here's the contents of the "uglified" app.js:
!function(){"use strict";var a=angular.module("app",["ngRoute"]);a.config(function(a){a.when("/",{templateUrl:"Views/home.html",controller:"home"}).otherwise({redirectTo:"/"})})}(),function(){"use strict";angular.module("app",[]).controller("home",function(a){a.title="Home"})}();
Claies is right when it comes to app initialization, but there is another thing.
You problem is much more complicated than you think. You are using uglifyjs, which changes names of variables in controller arguments. You need to use ngannotate in gruntfile.js or switch to longer controller definition.
This is brief explanation:
uglify wants to make your JS files lighter and changes it from this:
myApp.controller('GreetingController', function($scope, service) {
$scope.greeting = 'Hola!';
service.fnc();
});
To this:
myApp.controller('GreetingController', function(a,b) {
a.greeting = 'Hola!';
b.fnc();
});
This causes problems for angular because it does not know what a is.
If you want to solve it without changing your controllers, you can use ngannotate task. Alternative way is changing controller's definition:
myApp.controller('GreetingController', ['$scope', 'service', function($scope, service) {
$scope.greeting = 'Hola!';
service.fnc();
}]);
Uglify will transform that to:
myApp.controller('GreetingController', ['$scope', 'service', function(a, b) {
a.greeting = 'Hola!';
b.fnc();
}]);
NOTE: Please have in mind that using ngannotate is probably better way, beacause you will not face same problems with 3rd party services etc.
Your home.js has a subtle bug. You are re-declaring your app module, which is removing all the route configuration.
angular.module('app', []).controller... is the setter syntax for a module. Instead, you should use angular.module('app').controller getter syntax, to avoid re-declaring the module.
Just learning Angular and I'm encountering a few issues with module resolution. In js/directives/directives.js I have the following directive scoped to a directives module:
angular.module("directives").directive("selectList", function() {
return {
restrict: 'E',
link: function() {
// do stuff
}
}
});
On my webpage:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script>
angular.module("editUserApp", ["directives"])
.controller("editUserController", ['$http', '$scope', function($http, $scope) {
// do stuff here
}]
);
</script>
The error I'm getting is as follows:
Error: [$injector:modulerr] Failed to instantiate module editUserApp due to:
[$injector:modulerr] Failed to instantiate module directives due to:
[$injector:nomod] Module 'directives' 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.
Now, obviously, editUserApp cannot know where directives is, all by itself, so how do I tell it to fetch the directives.js file? Do I have to include it in a script tag (which doesn't seem very scalable)?
I need some way to import directives to my angular app. How can I do this?
You need to include your js/directives/directives.js file into your html and remove the directives dependency on your App module.
your code should be :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script>
angular.module("editUserApp", [])
.controller("editUserController", ['$http','directives', '$scope', function($http, $scope,directives) {
// do stuff here
}]
);
</script>
You need
angular.module("directives" ,[])
in your first block
angular.module("directives")
tries to find an existing module called directives
If you are looking for a way to import these files on a as needed basis, you might want to look at http://requirejs.org/ or http://browserify.org/ or similar tools.
Today I went to the brink of insanity.
My goal is simply to include a plugin ngCordova (in this example: cordova-plugin-device). And with a little work.
My starting point is a project Ionic tabs, nothing more.
Following the advice I received I first go to the website ngCordova, and I build a custom-ng cordova.js containing only what I need (by device).
I integrates into your project location: /www/lib/ngCordova/dist/ng-cordova.js.
I change my index.html as follows:
...
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>...
I made a dependency injection in my application module like this:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])
And finally, I modify the controller "DashCtrl" to integrate the plugin:
.controller('DashCtrl', function($ionicPlatform, $scope, $cordovaDevice) {
$ionicPlatform.ready(function() {
$scope.$apply(function() {
// sometimes binding does not work! :/
// getting device infor from $cordovaDevice
var device = $cordovaDevice.getDevice();
$scope.manufacturer = device.manufacturer;
$scope.model = device.model;
$scope.platform = device.platform;
$scope.uuid = device.uuid;
});
});
})
And I get this error in my browser (under Ripple):
Uncaught Error: [$ injector: modulerr] Failed to instantiate starter unit due to:
Error: [$ injector: modulerr] Failed to instantiate ngCordova Module due to:
Error: [$ injector: modulerr] Failed to instantiate ngCordova.plugins Module due to:
Error: [$ injector: modulerr] Failed to instantiate the module device due to:
Error: [$ injector: nomod] Module 'device' is not available! Either you misspelled the name or it forgot to load module. If a unit Registering assurer That You Specify the dependencies as the second argument.
The strange thing is that, even without touching anything in my code, if I do a:
bower install ngCordova --save
It downloads the full version of ngCordova, and there, everything works perfectly.
I really do not see where is my mistake. I hope that someone among you will help me to understand.
Thank you for the time you took to read my message and the time you take to answer (and sorry for my broken English).
It is a bug in the build system.
Open ngCordova.js file and change
angular.module('ngCordova.plugins', [
'device'
]);
to
angular.module('ngCordova.plugins', [
'ngCordova.plugins.device'
]);
have you include plugin by : cordova plugin add cordova-plugin-device ?
you can try to use full ng-cordova.js just for check?
MoreOver, it's a go practice to not write on $scope from controller.
use "controller as <alias>" to define alias, and register your var like this :`.
controller('DashCtrl', function($ionicPlatform, $scope, $cordovaDevice) {
var self = this;
$ionicPlatform.ready(function() {
// sometimes binding does not work! :/
// getting device infor from $cordovaDevice
var device = $cordovaDevice.getDevice();
self.manufacturer = device.manufacturer;
self.model = device.model;
self.platform = device.platform;
self.uuid = device.uuid;
});
})`
and use it on html with <alias>.myVarOrFucntion
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.24/$injector/modulerr?p0=curveApp&p1=Error%…rjs.org%2F1.2.24%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3DError%253A...<omitted>...0)
Im getting the above error in my Laravel/Angular application. I went to the URL and I'm still not sure what the error is coming from.
I have a file app.js in project/public/js with this code:
var curveApp = angular.module('curveApp', [
'ngRoute',
'curveControllers'
]);
And then a file config.js in project/public/js with this code:
curveApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/register', {
templateUrl: 'partials/register.html',
controller: 'RegisterCtrl'
});
}
]);
Sorry for the beginner questions -- I'd google to find answers but I'm not quite sure what to be looking for.
I'm trying to create HTML templates in project/public/js/partials and have them switch based on the URI without the page refreshing.
This errors show that, when some of your modules doesn't exist in page and not included, make sure what ngRoute and curveControllers are defined and attached to your DOM.