March 22, 2016 by Anuraj
AngularJS Optimization Minification Bundling DI ASP.NET MVC
Bundling and minifying an application scripts and CSS reduces page load time and asset size. This post is about the challenges and solutions while enabling bundling and minification in your aspnet mvc application. ASP.NET MVC comes with ASP.NET Web Optimization Framework which helps to combine and minify CSS and JS files. You can specify the script directory or files based on your convenience. This is important because identifying and troubleshooting script errors with bundling and minification enabled app is hard.
Here is the minimal bundling information, which bundles the Angular Framework and client scripts.
In the first line, I am bundling angular framework related files. In the next line, I am including all the script files under Client directory.
You can use the bundles in the _Layout.cshtml page using Scripts.Render method.
And here is my minimal Angular app and controller. As I am developing an Enterprise application, I am seperating the app and controller in two different files. Here is the app
And here is the controller code.
Here is the HTML which will use the app and controller.
- For script files order is important - If you run the application with bundling and minification enabled, you will get the first error.
If you look at the HTML source, you will find something like this.
This will resolve the script order problem. Here is the HTML source generated.
- Dependency Injection - So far you haven’t enabled the bundling and minification, you can do it various ways, either by changing the configuration to Release mode or by setting BundleTable.EnableOptimizations to True.
Once you do this and run the application again you will find some other like this.
It because the ASP.NET Web Optimization Framework renamed the ‘$scope’ variable to ‘n’. You can fix this issue using different DI syntax.
Using Inline Array Annotation
Or using $inject Property Annotation.
The above methods will help you to minify your code without breaking the application behavior.
Happy Programming :)
Copyright © 2024 Anuraj. Blog content licensed under the Creative Commons CC BY 2.5 | Unless otherwise stated or granted, code samples licensed under the MIT license. This is a personal blog. The opinions expressed here represent my own and not those of my employer. Powered by Jekyll. Hosted with ❤ by GitHub