Angular 1.* + Typescript + ES6 Modules + jspm

We have just started work on a shiny new Angular project so I thought it would be worth reviewing the current state of the art as far as project structure and workflows go.

After much faffing about with various options including requirejs and browserify I think I have settled on the following setup:

• Typescript (still not 100% sold on this, but given the direction of Angular 2 I can see the benefits!)
• External modules using ES6 module sytnax (I didn't like Typescript internal modules and the messy IIFEs it compiled down to)
• Jspm - to run ES6 modules in the browser for development and bundling for production
• Gulp for automating build processes

It was a bit of work to get set up and running, but the above combination gives a development workflow that is very future focused. Things I like about it so far are:

• It is easy to put in place an Angular 2 like component architecture in order to ease the upgrade path
• All the file/module dependencies are handled by the explicit ES6 module imports, so no need to worry about making sure Angular files are loaded in the correct order
• Angular controllers can be easily tested as standalone classes instead of having to mock the whole framework
• Reasonably seamless flow from Typescript coding to debugging ES6 in the browser with jspm and sourcemaps

Things I still need to sort out:

• Code coverage of the Typescript files
• Some funny path problems with Karma (I have temporarily fixed by adding a special jspm conf file for Karma with baseURL: "/base")
• Skip compiling to JS step in develop and use the new jspm Typescript compiler option

There is a very basic example of the initial setup at https://github.com/glendaviesnz/angular1-Typescript-ES6modules-jspm-gulp - this is very much a work in progress experimental playground, and not yet another angular boilerplate/seed project - but may be of interest to others exploring this sort of workflow.