I've got an MVC 5 application that bundles up my angular app like such:
var angular = new ScriptBundle("~/App")
.Include("~/App/app.js")
.IncludeDirectory("~/App", "*.js", true);
bundles.Add(angular);
And then renders it in the head, after all other resources load, here:
(jquery, angular.min.js, other resources)
#Scripts.Render("~/App")
Open toggling my web.config's debug attribute to false:
<compilation debug="false" targetFramework="4.5.2" />
The main module for my angular app will not load:
Error: [$injector:nomod] Module 'wdf' 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.
Before you link me to documentation about how to ensure angular will load in minified form, know that I've already triple checked every single factory, controller, service [you name it], for the proper syntax outlined in AngularJS's documentation. I've also reduced my entire angular application down to a single file and a single line to eliminate possible other injection errors:
(function () {
'using strict';
var app = angular.module('wdf', []);
})();
I've also always had the app stated as such in HTML:
<!DOCTYPE html>
<html ng-app="wdf" ng-strict-di>
...
The application runs completely fine un-minified, even with ng-strict-di . I've been wrestling with this for hours and hours. Every thread I can dig up essentially tells me to ensure I've declared all of the module's dependencies right, but I'm pretty sure I have considering:
ng-strict-di hasn't caught anything I should have coded better
I've triple checked every friggin' file to ensure I've followed best practice for minification
And finally, the app doesn't even work it's most simplest form
Son of a.... of course, right I post, I find the issue.
I had failed to look at the developer tools to see if the site was properly loading the minified file. It was returning 403 for the bundled request. The solution outlined here with a style bundle worked the same.
MVC4 style bundle giving 403
In summary, the fix was this change:
FROM var angular = new ScriptBundle("~/App")
TO var angular = new ScriptBundle("~/wdf")
and then changing it the HTML as well: #Scripts.Render("~/wdf")
Hopefully this helps someone else who runs into the issue...
I would love to implement Drag and Drop in my Angular project using the angular-dragula module (https://github.com/bevacqua/angular-dragula). However, it seems to be heavily dependent on RequireJS. I've not used Require for a while and only then for an example app or two. Is there an easy way to untangle Require from this module?
The author seems to think it is simple (https://github.com/bevacqua/angular-dragula/issues/23) and has shut down similar questions as well without a real explanation. I've looked at the code and don't see how to load the module without adding RequireJS to my project (which I don't want to do). Am I stuck with either not using this module or adding Require or is there a way to use this without Require?
OK, after help from those who commented (thanks everyone!), I was able to get this to work. There are a couple things that you need to do. First, I was bundling this module with the rest of my modules and trying to call it. That will not work because it needs to initialize with a parameter (angular). Therefore, you need to do the following:
Add a reference to angular-dragula.js (or the min version) to your index.html page below the declaration for angular but above where you create your app.
When you declare the dependencies for your app, specify angularDragula(angular) (not in quotes).
Use dragula as you normally would. If you need to access the service, the name would be angularDragula.
For example, here is my declaration of app:
var app = angular.module('app', [
'ngRoute',
angularDragula(angular)
]);
And then to get a simple list to be drag and drop capable, this is my html:
<div dragula='"bag-one"' dragula-model="vm.items">
<div ng-repeat="item in vm.items">{{ item }}</div>
</div>
Note that I do not declare angularDragula anywhere, unlike the examples. In the example the author gives, he requires angular and creates the angular variable and then he requires angular-dragula and creates the angularDragula variable. This is not needed if you are not using RequireJS as long as you load the scripts in the right order.
While creating a simple MVC app with xmlviews in OpenUI5, i have run into an error.
I load OpenUI5 as it is mentioned in their getting started guide:
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'>
</script>
Then load an xmlview:
var starterPage = sap.ui.xmlview("starterPage");
My problem is that when I include a DateTimeInput in my starterPage xmlview the loading fails with the following:
Error: found in negative cache: 'sap/m/DateTimeInput.js' from https://openui5.hana.ondemand.com/resources/sap/m/library-preload.json/sap/m/DateTimeInput.js: Error: failed to load 'sap/ui/thirdparty/mobiscroll/js/mobiscroll-core.js' from ./sap/ui/thirdparty/mobiscroll/js/mobiscroll-core.js: 0 - NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
Does anybody have an idea?
Thanks!
I think there is either something wrong with your view definition, or possibly your network permissions. I created a simple jsbin example (http://jsbin.com/kukoju/1/edit?html,console,output) that I think does essentially what you described and it seems to work fine for me. In attempting to simplify the problem I omitted the use of the XML view and simply directly instantiated the DateTimeInput in javascript. If my jsbin example works for you then I'd recommend you post more of your code so we can see what might need to be changed. If that doesn't work then I suspect you need a local system administrator to help you with the problem.
If you run a simple Openui5 probably it has just a controller. The mentioned error happens when you tried to use a third party library and it's not implemented correctly. just check out the controller files be sure that there is no third party library included.
Or
The DateTimeInput what you used has a dependency and the dependency files are not found.
May could be better to use this control
https://openui5.hana.ondemand.com/#/api/sap.m.DateTimeField
Trying to uglify angularjs app with mangle causes the error. However I've read that that should be fixed by ngmin. I use ngmin to properly wrap my controller code in an array as required by angular. I can confirm that ngmin works and all my code is wrapped. Only mangling causes the error, mangle:false works just fine. Can anyone confirm whether mangling is supposed to work or if there are edge cases other than the array issue that causes mangling to fail.
Thanks.
I could not get it to work with ng-min. However I did get it to work with ng-annotate. https://github.com/olov/ng-annotate
It's a fantastic replacement for ng-min.
I'm having a hard time trying to pinpoint which, of the very many, methods I have in my angular app that would be causing the error:
Uncaught Error: [$injector:unpr] Unknown provider: nProvider <- n
This only happens once the javascript has been bundled & minified by ASP.Net.
I have ensured that all the controllers, and any other DI, is using the minification-safe method, I.E My controllers/service etc are using the method:
appControllers.controller('myCtrl', ['$scope', function($scope){
//......
}]);
I've gone through every JS file in our app - there are a lot... and can't find anything that violates this way of injecting dependencies - though there must be one somewhere...
Is there a better way to pinpoint which method could be causing this error?
Thanks
For anyone else struggling with this problem, I found an easier solution. If you pull open your developer console (on chrome) and add a breakpoint where angular throws the error:
Then, on the stack trace on the right, click on the first "invoke" you see. This will take you to the invoke function, where the first parameter is the function angular is trying to inject:
I then did a search through my code for a function that looked like that one (in this case grep "\.onload" -R public), and found 8 places to check.
For anybody reading this, using Angular 1.3
You can now use Angular's ng-strict-di check like this:
<div ng-app="some-angular-app" ng-strict-di>
...
</div>
This will give you an appropriate error message if you didn't load your dependencies using the array syntax.
I had the same problem and I found a solution that could be helpful for the rest. What I propose is basically what I saw in the comments and docs. If you are using Angular 1.3.0 or above, you can use this:
<html ng-app="myApp" ng-strict-di>
<body>
I can add: {{ 1 + 2 }}.
<script src="angular.js"></script>
</body>
</html>
In my case, I have everything within a file app.js so the only thing I need to do for finding my DI problems is to add this little code at the end:
angular.bootstrap(document, ['myApp'], {
strictDi: true
});
It's better documented in Angular Docs
I hope that helps. Good luck!
As mentioned in the comments, These are the steps I took to try and find my JS error.
If there is another, easier, solution, please feel free to post it and I may mark it as accepted.
Trying to debug minified code is a nightmare.
What I eventually did was copy my minified javascript, directly from the inspector in Chrome.
I then pasted the JS into http://www.jspretty.com/ - I had tried http://jsbeautifier.org/ but found their site froze with such large JS code.
Once it was 'pretty-fied' I created a test.js file in my solution and pasted the, now easier to read code, into it.
Quick step to comment out the #script tag in my _layout and add a link to the test.js file and I was ready to debug a now, far easier to read, chunk of Javascript.
It is still pretty awkward to traverse the call stack, though now you can see actual methods it makes it far less impossible.
Something that helped me solve this (finally!) was actually already in the angular docs! If you add the ng-strict-di attribute to your code wherever you define your ng-app, angular will throw a strict warning so you can more easily see what's going on in development mode. I wish that was the default!
See the argument list at the bottom of the ngApp docs.
https://docs.angularjs.org/api/ng/directive/ngApp
The way this works for me is the following:
1) have two test specification html files (unit test) minimized and plain
2) make sure the bundling of the files are in the same order as the plain spec file (JS script reference)
3) make sure to explicitly declare all dependencies (array or $inject declares see http://www.ozkary.com/2015/11/angularjs-minimized-file-unknown-provider.html)
When there is a mistake on the unit test (miminized reference) file, I can compare and make sure the reference of the files is in the correct order as the working file.
hope that help.
I had the similar issue and used lots of time to investigate and figured out it was the Chrome extension Batarang that was injecting the bad code and error in Angular looked exactly the same. It's really a pity it's so hard to find what exactly is causing the problem.
I had the similiar issue too. The solution is exacly the answer from ozkary point 3, that is to make sure to explicitly declare all dependencies including "resolve" part of your route.
Below is my code.
when('/contact/:id', {
controller: 'contactCtrl',
templateUrl: 'assets/partials/contact.html',
resolve: {
contact: ['ContactService', '$route', function(ContactService, $route) {
return ContactService.getContactDetail($route.current.params.id);
}]
}
})
For those who's bootstrapping their angularjs app.
angular.bootstrap(body, ['app'], { strictDi: true });
Don't forget to debug in non minified code and you should be able to figure out pretty quickly the malformed dependency injection.
The malformed injection is usually formatted like this :
...
.run([ function(ServiceInjected){
...
But should look more like this
...
.run(['ServiceInjected', function(ServiceInjected){
...
This is tested in angularjs 1.7.2