I have AngularJS, and Angular directives for Bootstrap in a project, both of which have been added via Nuget.
When compilation debug="true", everything works fine, but once I change compilation debug to false, Angular stops working, and I get the following error in Chrome's console:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=nProvider%20%3C-%20n
at Error (native)
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:448
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14726
at Object.i [as get] (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:13802)
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14801
at i (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:13802)
at r (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14014)
at Object.instantiate (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14185)
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:30669
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:23558 angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1
(anonymous function) angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1
All of my other Javascript/CSS works as expected. What could cause Angular to stop working once minified? Is this a known issue?
Thanks
ASP.NET MVC minifies javascript files when the compilation debug value is set to "false". The angular tutorial includes this note about minification:
Since Angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to minify the JavaScript code for [your] controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.
The most common technique to overcome this problem is inline bracket notation, like:
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);
This SO question explains the importance of minification safe syntax: Angularjs minify best practice
Related
I am working on a strongly typed Angular2 and MVC6 project. Idea is to use Razor + Angular.
When I try to do
templateUrl : 'Home/Index' // Expecting MVC controller to load the Index.cshtml
I get an error
Potentially unhandled rejection [3] t#http://localhost:41860/lib/angular2/bundles/angular2.min.js:6:5082
_</e.prototype.normalizeLoadedTemplate#http://localhost:41860/lib/angular2/bundles/angular2.min.js:15:19192
_</e.prototype.normalizeTemplate/<#http://localhost:41860/lib/angular2/bundles/angular2.min.js:15:18927
Error
On the other hand, when I comment Layout section in _view.cshtml it works (I still see issues loading child routes). Loading angular2 dependencies in Index.cshtml rather than _Layout.cshtml (tried other way too).
But, when I reference a plain HTML file, it works.
templateUrl : 'path/app.html' // This works without an error.
I did not encounter this error when I worked with angular 0.46 aplha and I see this after upgrading it to angular 2.0 Beta.
Looking for some inputs!
I have problem injecting the select2 library in my TypeScript/Angular project. I don't know what else to do to make it working, I searched for some working example of but without success.
jQuery gets loaded
select2.js gets loaded
definition file select2.d.ts is there (I also have matching version)
Module is injected like that:
public init() {
var myApp = angular.module('app', [
'ui.router',
'ngCookies',
'ui.bootstrap',
'select2'
]);
...
I get an error:
Module 'select2' is not available! You either misspelled the module name or forgot to load it.
What am I doing wrong there? Any help appreciated.
You are trying to inject Select2 into your application like an Angular module. This is throwing an error because Select2 is not an angular module, it's a jQuery component.
Angular UI provides ui-select which is an Angular native version of Select2.
So I resolved this by initializing select2 in jQuery style direct in my controller...
$('select').select2();
It is probably not very nice solution but it works. If anyone got better solution feel free to post it
Feeling completely baffled. I know that several questions have been asked about this and I've read and reread all of them.
Angular (with ng-route) was working until a certain commit (I'll include images of the diffs of the js files). I've already changed what I would have expected to be the guilty party, shown here:
Changed this
app.run(function($rootScope, $http){
$rootScope.logout = function(){
$http({
url: 'logout',
method: 'GET'
}).success(function(data){
window.location = window.location.href;
});
};
});
to this
app.run(['$rootScope', '$http', function($rootScope, $http){
$rootScope.logout = function(){
$http({
url: 'logout',
method: 'GET'
}).success(function(data){
window.location = window.location.href;
});
};
}]);
However, even if I completely commit out the above code the error still persists, so I really don't think that's it. I've also commented out chunk by chunk of code and nothing seems to resolve this issue.
I've attached an image showing the diff in the commit file. Before this commit, angular was working fine on Heroku/production. Am I just being stupid and not seeing it?
http://imgur.com/SwsEeuH,oITUoY7,bQ8HKrj,tZF4HMS
Thanks in advance!
You get this kind of error when you use a JavaScript minifier that mangles a Angular dependency. Because Angular looks dependency up by argument name it can't find them.
I'm not sure what you are using to build your JavaScript into minified and merged files but you'll need to work out a way to do this in an Angular friendly way. I had a project recently that used the ngmin grunt plugin to minifier my JavaScript and started to get similar errors until I switched to ng-annotate.
A bit too late to this question I guess, but I stumbled accross the same problem but only while using Angular Material. All my dependencies were injected as suggested and everything worked fine before using Material.
My setup is Angular on a Rails 5 app runnning on production on Heroku. Even following the best practices on funciton annotation for Angular, injectin Angular Material will not work in production and will throw an UnknownProvider error unless you add the ngannotate-rails gem to your project.
This gem helps angular files be annotated correctly before the assets pipeline minifies the JS files and screws dependency injections up.
So I just recently upgraded a large project to rails 3.1. I've got the asset pipeline set up and working. However, a lot of the plugins we use and the custom jQuery functions we've written don't seem to be getting evaluated, although the source is in application.js. For example:
(function($) {
$.fn.searchable = function() {
....
}
})( jQuery );
I see this code in application.js, but anything that tries to use it gets a javascript error, undefined function. However, if I wrap the whole thing in a function definition, and call that function on document ready, then it works.
This is a really ugly workaround. Any ideas why it's not working without wrapping in a function?
Thanks.
maybe you should take a look at 'coffeescript's namescope'. e.g.
//define your js function as:
this.some_function_name() =>
alert('hello~')
//call it as:
this.some_function_name()
I'm a rails developer trying to learn Backbone and then I ran into this problem: since Underscore templates include symbols like <%=%>, I guess templates can't be included into erb files, so is it okay to have a rails partial for every single template? And what extension should it be?
You can escape the erb symbols by using two % in the opening tag, and put your backbone templates in the rails views:
<script type='text/template' id="my-template'>
<%%= name %>
</script>
will output the following in your page:
<script type='text/template' id="my-template'>
<%= name %>
</script>
Putting your Backbone templates directly in your rails views is IMHO the best option when you're trying to learn. You're already wrestling with the new concepts, no need to add another hurdle.
Starting with Rails 3.1, it provides two things that make working with Backbone templates a little easier: the asset pipeline, and automatic JST (JavaScript Template) compilation.
Create a directory in your app/assets folder called templates. This directory will automatically be picked up by the asset pipeline.
Next, name the files in that directory with an extension of jst and the type of template you are creating ejs (embedded javascript). You can even nest them in directories. For example:
app/assets/templates/my_template.jst.ejs
app/assets/templates/bookmarks/show.jst.ejs
The asset pipeline also allows you to use other templating languages like embedded coffeescript, mustache, handlebars, etc. by simply changing the file extension (and including any necessary gems).
Now to reference your JST templates in your Backbone views, simply use the path to the filename:
var Bookmark = Backbone.View.extend({
template: JST['bookmarks/show'],
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
});
You may need to add this line to your application.js:
// require_tree ../templates
Here's a nice article which explains all of this in a little more detail: http://www.bigjason.com/blog/precompiled-javascript-templates-rails-3-1
Where should you put your Backbone templates? I'd say nowhere. I believe that in most Rails applications, the server should be responsible for all rendering of HTML, while the client-side JavaScript should just be responsible for inserting that rendered HTML into the DOM. Among other things, this makes I18n easier.
The exception would be if Rails is simply being used as a lightweight backend for an application that runs mostly on the client side (though in that case, you might want to use Sinatra or something instead). In this case, Rails should probably render nothing, and have the JS do all the rendering.
Notice the underlying principle here. Either the server should be responsible for all rendering, or the client should. Splitting it will make life harder.