I've done quite a bit of work with type script and we always used modules to create namespaces. I'm finding this isn't working with angular. Any assistance on what special needs to be done is appreciated.
With the below code I would expect to be able to reference the code in an import as MyApplication.Contacts.ContactComponent.
module MyApplication.Contacts {
@Component({
templateUrl: '/Home/Contact'
})
export class ContactComponent {
}
}
Using ES6 modules you don't need namespaces anymore - the angular2 docs heavily lean towards this style so I think this will be the approach for writing angular2 apps. The downside is that you need a compilation step but as you're using ES7 decorators this seems to be OK anyways.
// my-application/contacts.ts
import { Component } from 'angular2/core';
@Component({
templateUrl: '/Home/Contact'
})
export class ContactComponent {
}
// later in my-application/app.ts
import { bootstrap } from 'angular2/platform/browser';
import { ContactComponent } from './contacts';
// Do something with ContactComponent ...
By the way: TypeScript now has the namespace keyword that replaces module to better being able to distinguish internal and external modules.
The module in your example is Internal TS Module. Most of the examples you see around use External TS Modules (check out what Handbook has to say about them). External modules also look like ES6 Modules, so that's another benefit of using them.
To organize external modules you can just use folders and properly configured loader (like SystemJS) will know where to look for them. If you want to preserve your structure, just make MyApplication/Contacts.ts file and you can import it like this:
import {ContactComponent} from 'MyApplication/Contacts';
