how to use SystemJS to bundle angular TypeScript with internal modules
Question: We are considering moving some of our angular projects over to typescript and
having some trouble with internal module/namespaces.

We posted this working example on github:
<https://github.com/hikirsch/TypeScriptSystemJSAngularSampleApp>

steps:

    
    
    npm install jspm -g
    npm install
    cd src/
    jspm install
    jspm install --dev
    cd ..
    gulp bundle
    cd src/
    python -m SimpleHTTPServer
    

This is the gist of the application: index.ts

    
    
    /// <reference path="../typings/tsd.d.ts" />
    /// <reference path="../typings/typescriptApp.d.ts" />
    
    import * as angular from 'angular';
    
    import {ExampleCtrl} from './controllers/ExampleCtrl';
    import {ExampleTwoCtrl} from './controllers/ExampleTwoCtrl';
    
    export var app = angular.module("myApp", []);
    
    app.controller("ExampleCtrl", ExampleCtrl);
    app.controller("ExampleTwoCtrl", ExampleTwoCtrl);
    

ExampleCtrl.ts

    
    
    /// <reference path="../../typings/tsd.d.ts" />
    /// <reference path="../../typings/typescriptApp.d.ts" />
    
    
    export class ExampleCtrl {
        public static $inject:Array<string> = [];
    
        constructor() {
    
        }
    
        public name:string;
        public hello_world:string;
    
        public say_hello() {
            console.log('greeting');
    
            this.hello_world = "Hello, " + this.name + "!";
        }
    }
    

ExampleTwoCtrl.ts

    
    
    /// <reference path="../../typings/tsd.d.ts" />
    /// <reference path="../../typings/typescriptApp.d.ts" />
    
    export class ExampleTwoCtrl {
        public static $inject:Array<string> = [];
    
        constructor() {
    
        }
    
        public name:string;
        public text:string;
    
        public second() {
            this.text = "ExampleTwoCtrl: " +  this.name;
        }
    }
    

As stated, this works all well and good. But we'd rather have everything under
a namespace like this:

    
    
    module myApp.controllers {
        export class ExampleController {
            ...
        }
    }
    //do we need to export something here?
    

and then use it like this:

This will compile correctly running the gulp bundle task but give an error in
the browser /// ///

    
    
    import * as angular from 'angular';
    
    import ExampleCtrl = myApp.controllers.ExampleCtrl;
    import ExampleTwoCtrl = myApp.controllers.ExampleTwoCtrl;
    
    export var app = angular.module("myApp", []);
    
    app.controller("ExampleCtrl", ExampleCtrl);
    app.controller("ExampleTwoCtrl", ExampleTwoCtrl);
    

browser error:

    
    
    Uncaught ReferenceError: myApp is not defined(anonymous function) @ build.js:5u @ build.js:1i @ build.js:1c @ build.js:1(anonymous function) @ build.js:1(anonymous function) @ build.js:1
    build.js:1 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
    Error: [$injector:nomod] Module 'myApp' 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.
    http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myApp
        at http://localhost:8000/build/build.js:1:4007
        at http://localhost:8000/build/build.js:1:12353
        at e (http://localhost:8000/build/build.js:1:11925)
        at t.register.e (http://localhost:8000/build/build.js:1:12237)
        at http://localhost:8000/build/build.js:1:20741
        at o (http://localhost:8000/build/build.js:1:4392)
        at p (http://localhost:8000/build/build.js:1:20519)
        at Bt (http://localhost:8000/build/build.js:1:22209)
        at t.register.s (http://localhost:8000/build/build.js:1:10038)
        at Q (http://localhost:8000/build/build.js:1:10348)
    http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myApp&p1=Error%3A%…0%20at%20Q%20(http%3A%2F%2Flocalhost%3A8000%2Fbuild%2Fbuild.js%3A1%3A10348)
    


Answer: According to [typescript
documentation](https://github.com/Microsoft/TypeScript/wiki/Modules#needless-
namespacing) you do not need to use internal modules when compiling to
commonjs. As stated:

> A key feature of external modules in TypeScript is that two different
> external modules will never contribute names to the same scope. Because the
> consumer of an external module decides what name to assign it, there's no
> need to proactively wrap up the exported symbols in a namespace.

I have found the best way to use typescript with a commonjs loader (I am using
browserify) is to do something like:

    
    
    class ExampleTwoCtrl {
        public static $inject:Array<string> = [];
    
        constructor() {
    
        }
    
        public name:string;
        public text:string;
    
        public second() {
            this.text = "ExampleTwoCtrl: " +  this.name;
        }
    }
    
    export = ExampleTwoCtrl
    

and the use it like:

    
    
    import MyController = require('./ExampleTwoCtrl');
    var a = new MyController();
    

That being said, I watched the recording from [John Papa's talk at
AngularU](https://angularu.com/VideoSession/2015sf/dan-and-john-bringing-
their-view-on-the-latest-in-angular) where they demonstrated some code bundled
using systemjs written in typescript without any imports, just internal ts
modules. I asked on twitter where I could find the sample code, but haven't
got a response yet.

