Bundling AngularJs TypeScript App from Visual Studio

Question

I am creating web app with TypeScript, AngularJS and Bootstrap.

For this purpose I use Visual Studio Project Template HTML Application With TypeScript .

Project structure is:

• app
  • moduleA
    • controllerFolder
      • controller.ts
      • view.html
    • moduleA.ts
  • moduleB
  • moduleC
  • app.ts
• scripts
• css

App folder contains many *.ts files hence I combine these files to single file my-app.js in Visual Studio with TypeScript Build > Combine Js output file to one .

And include this script file to index.html.

Of course if I run app it not work.

Module 'app' 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.

I don't use RequireJs, AMD, Browserify or another.

I don't know if combine angular 'app' *.js files to the one is good practice.

So my questions are:

• What is good practice for this scenario?
• Can I bundle all 'app' *.ts / *.js files to single file?
• Can I create working single *.js file with Visual Studio without using RequireJs, AMD, Browserify.
• If I can't create working single file with Visual Studio can I achieve this for example with Gulp?

Answer 1

You can definitely have all your *.ts files transpile to a single JS file. I'm not sure how Visual Studio achieves this - I do this using the gulp-tsc module and gulp (which I run using the Task Runner Explorer extension for VS2013 ).

There may be some error during the transpilation process in your case that is preventing the single output file from being generated correctly... which you might be able to see if you turn on verbose build logging in VS.

Alternatively, you could run tsc yourself from the command line ( outputting to a single file ) and see if you get any errors.

It may be the case that you have to add a few more reference path hints so that tsc knows how to transpile it properly. I ran into this problem when class A extends B and the source for ClassA was being transpiled/included before the source for ClassB. It turns out tsc isn't smart enough to recognise such situations so I had to explicitly add the following to the source for ClassA:

/// <reference path="../foo/bar/ClassB.ts"/>