ASP.NET bundling and minification failing on angular.js - javascript

When I turn on bundling everything bundles and minifies correctly except my angular.js file.
I get the following error:
"Minification failed. Returning unminified contents. (173,115-122):
run-time error JS1019: Can't have 'break' outside of loop: break a"
However it seems to return a minified result and the site doesn't load.
I have tried updating the file to angular 1.5.8, and tried bundling the .min.js file but no success.

What I end up doing is just remove angular.min.js from project and let ASP bundling process to minimize angular.js and produce final minimized package.
Sometimes I had to do same trick with other JS libs (if my memory serves JQquery..)
Also in our solution we use .min.js files, but devs forget to regenerated this file from source and there were cases when release version had "fixed" but not fixed version of the file. I gave up fighting with this and just deleted all .min.js files. -))

Related

gulp-sourcemaps Keep Intermediate Files

When I use the gulp-sourcemaps plugin, I typically have both the comment and content removed so the sourcemap header is used instead. This makes it much easier to show the original files in the browser debugger in development and staging, then remove it in production. We also try to load sourcemaps wherever possible, mostly for vendor libraries.
This works fine for the most part. However, intermediate files seem to be lost. I am guessing the loadMaps option to sourcemaps.init(), which allows for loading existing maps, removes the intermediate files when it gets their maps. This is likely fine for most cases, as the original files are there, but too often libraries only include the output file with maps added as a comment, but don't include those original files. This means we don't have access to the original files, and the browser does not have access to the built library file.
For example, angular-ui-router is written with TypeScript, then output to JavaScript when built. This means the end developer does not have to compile with TypeScript in his/her build process, as this is already done in the ui-router build process. Now, the output JavaScript file is accessible at <server root>/node_modules/#uirouter/angularjs/release/angular-ui-router.js, and the original TypeScript files were, according to the built file's sourcemap comment, in the <server root>/node_modules/#uirouter/angularjs/node_modules/#uirouter/core/src and <server root>node_modules/#uirouter/angularjs/src folders.
When I include the angular-ui-router file into a vendor.js or vendor.min.js file using my favorite tool, it bundles the angular-ui-router maps into the resulting .map file, but does not include the <server root>/node_modules/#uirouter/angularjs/release/angular-ui-router.js file as a source. This means we can't see either that file, or the TypeScript files, which makes debugging pretty much impossible using only the browser. To make matters worse, any errors we get are sourcemapped all the way back to the TypeScript files. We don't have the TypeScript files, so we can't look there, and now we don't know where in the JavaScript the error is, either! Thankfully, angular-ui-router doesn't have many complex errors, and the ones it does have are nicely documented, but other libraries are not so helpful.
Is there a way to include intermediate files as sources in the output sourcemap? Otherwise, is there an easy way to load some sourcemaps with something like loadMaps, but not others?

angular-fullstack turn off minification

I am trying to get started with the yeoman generator Angular-Fullstack. I am using TypeScript, but when I compile and run all the js files get put into one large app.js. This would be fine for production, but for debugging its a hassle. Does anyone know how to change this so just the compiles JS shows and gets executed?
EDIT
I am using the default gulp.babel.js file for all of the configurations. There is no grunt file, so alas those links are to a different issue.

Visual Studio Typescript min file output when publishing

in my project i have several ts files, those when transpiled generates the correct output and generates a .js, min.js and min.js.map. All of them are transpiled on save and files are updated automatically, but they are not under source control and don't belong to the visual studio project solution, i'm ok with that.
Then in my mvc bundle configuration y create a bundle that takes everything in one folder and creates my bundle, thats fine, and if i set EnableOptimizations = true, then my bundle is served and minified, no problems at all. I create my budle this way
var appBundle = new ScriptBundle("~/bundles/app");
appBundle.IncludeDirectory("~/ScriptsApp", "*.js", true);
appBundle.Transforms.Add(jsTransformer);
appBundle.Orderer = nullOrderer;
bundles.Add(appBundle);
During devlopement works fine because if i'm wright IncludeDirectory will search in my folder instead of my project.
But when i publish my web application in the output are placed only the .js files not the .min.js, thats why then my bundle works but it's not minified because the min.js files are not present.
I know that this may be not the best approach in order to build a bundle, but it is the approach taken and i can't change if.
My question is, how can i change my building configuration in order to place those .min.js on the output?

ASP.NET MVC bundle working on local but not in server

I am trying to use the bundles feature in ASP.NET MVC in my project, everything works great in my local, if I switch the compilation debug property to false I can see that the bundle is being generating with a version (v=XXXXXXX) and my application keeps working.
When I deploy the application to a server and request the page, the bundle is there but the v= value is empty. Is there anything I am missing?
<script src="/bundles/bundlename?v="></script>
One of the possible cases you have is with optimization side of bundles. I had the same issue with my scripts and styles when I started to use minified versions. For example, if I specified in bundle configuration with .min.js file then you can fall into problem when optimization framework minifies already minified script(s). And it also occurs only in release mode. I solved it with BundleTable.EnableOptimizations = false; in BundleConfig.cs file after all bundles' configs
I think you miss specific root path since locally its not the same vs server side.
Why don't you use the script helper from the framework:
#Scripts.Render("~/bundles/bundlename")
I found the issue, after trying everything I went back an check the build scripts on the TFS server, we have continuous integration configured, turns out the build server was removing the .js and only letting the .min.js files on the final build. I removed that instruction and it started working.
Basically the .js did not exist on the server so there was nothing to bundle.
Thank you guys for your help!

VS2013: Publish minified bundle created on files outside of the project

I use Visual Studio 2013 and .NET 4.5 for an MVC project.
I've learning to use AngularJS via several videos on Pluralsight and one of them walks through the process of using Grunt to clean the output directory, then use ngmin to min-safe the Javascript files.
My process is using a gruntfile.js to clean and run ngmin against the javascript files in my solution, then put them in a directory called app_built. This is executed via a batch file in the pre-build for the project and then I include it via a ScriptBundle with IncludeDirectory pointing to the app_built directory. My intent is to use the Bundling features of .NET 4.5 to do the rest of the minification and concatenation of the Javascript after all the files have been min-safed via Grunt.
I specify the path to the min-safed files with the following:
bundles.Add(new ScriptBundle("~/bundles/minSafed")
.IncludeDirectory("~/app_built/", "*.js", true));
If I run this on my local machine, it runs fine without a hitch. The Javascript is minified and bundled as I'd expect and the resulting web application runs fine as well.
If I publish the website to a remote server, I get a server error that the "Directory does not exist. Parameter name: directoryVirtualPath". I assume this error is saying that it's unable to find the directory populated with my many *.js files. I also assume this is because they weren't published since they aren't part of the solution, even though the folder they reside in is a part of the solution (it's just empty within the solution explorer in Visual Studio).
If my assumption is correct, what can I do to add these files to my solution so they'll be published with the rest of my web application with minimal effort on my end each time?
And if I'm incorrect in the assumption, what I can I do to resolve this otherwise?
Thanks!
I never did find a great way of going about this. I found information at http://sedodream.com/2010/05/01/WebDeploymentToolMSDeployBuildPackageIncludingExtraFilesOrExcludingSpecificFiles.aspx that seems related, but I was unable to make it work.
Rather, since I knew the name of the outputted file, I simply created such an empty file in my project and referenced that where I needed to. I then had the pre-build task replace the contents of that file with the externally minified version and it would be packaged with the project as necessary, so it works well enough.

Categories