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.
Related
Update: I was able to solve the issue. One of the third part scripts I was including was missing a semicolon, thereby breaking the closure. When the minified version was being used, the generator didn't know where the block ended and new blocks began. The grunt build process works fine as is now, without modification.
I've got an angular app that I built with the generator-angular yeoman generator and it works wonderfully in the local "grunt serve" state. When I run "grunt build," however, the built version doesn't work properly. I'm using the standard Gruntfile that comes with the generator.
The only different between the grunt serve and the grunt build tasks are the minification, concatenation and uglification of files. You'd think it would simply concat and minify the files in the same order it loads them in the development build, but it looks like things are being loaded in a different order—throwing a app.init() is not a function error—which tells me the app module isn't loaded before that section.
Is there something that needs to be done to the default build task to fix this issue?
I'm not sure what the problem is, but I think that can be the minification process, there are several ways of writing a controller and some of them have problems at the time of the minification.
If the problem is the minification you could check these pages.
AnularJs - A note on minification
Best Practice of Minification StackOverflow
Example about minifying AngularJs Controllers
I'm trying out TypeScript for the first time and I've downloaded the angularjs.TypeScript.DefinitelyTyped package from nuget but I cannot generate JavaScript files from it.
I've tried deleting the file, creating a new TypeScript file (called angular.ts) and this generates a JavaScript absolutely fine with the exact same code. I could keep this file and do the same with the others but it seems like I should be able to compile these sorts of files.
I've also looked into the Properties of my project and under TypeScript Build I have the following options activated:
ECMAScript version: ECMAScript 5
Compile on Save
Allow implicit 'any' types
Module system: none
Keep comments in JavaScript output
Generate source maps
I don't have any errors when I build my project and all of my other .ts files that I have added all generate JavaScript files without an issue. I've looked to see if this is a known Visual Studio issue but I can't seem to find much about it. Is there a setting for this or should it happen automatically?
Sorry if I misunderstood the question but you cannot compile d.ts files. When you see a d.ts file, you can think of it like a interface for a project that was not written in TypeScript.
For example, I use phaser game engine. So like everyone else, I go and get the phaser.js file. At this point, my TypeScript cannot understand this phaser.js file. So, I go and grab the phaser.d.ts file and it is that which contains the full API of the phaser.js.
So basically, .ts files will always compile to JavaScript, whereas .d.ts are the definition files providing the bridge to using a .js file!
We are using Typescript with Visual Studio in our app, but we also had some problems when trying to coerce VS 2013 to compile TypeScript to JavaScript. We opted out for Grunt plugin and no longer rely on VS. I suggest you do the same. One caveat: don't use watch in typescript Grunt task. It will trigger VS into infinite loop when you will be building your project. Instead when you apply changes to your .ts files, tab switch to command line and run grunt task for ts->js compilation.
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.
I assume that file is for Grunt's build task, however, there is no configuration for coffee script compiling in the Gruntfile. This seemingly irrelevant file makes me wonder if the maintainers of the Yeoman Angular project put it there for a good reason, which makes me a bit paranoid to straight out remove it.
Yes, you can remove it with no worries, especially if you have nothing in it. If you're really worried, move it to a different folder and run a build, then if it fails you can move it back.
I'd like to start bundling our javascript files. I've found that it's really easy locally using the web essentials plugin, however I need to set up the build server to generate the bundled .js file.
I'd rather not check this generated file into TFS as it will cause conflicts for our developers, and also since it's generated from the source I feel that the server build should generate it.
Is there a command line utility for doing the script bundling outside of visual studio that could be used as part of a build script? My google-fu is failing to find one.
Many thanks,
As long as you wrote it as proper AMD modules, require.js comes with a tool to turn all your files into an optimized bundle.