Using Angular with TypeScript and Namespaces

Question

I'm in the process of building a large-scale application and I'm trying to evaluate TypeScript and Angular as the base technologies to use.

Unfortunately, I'm having an issue with namespacing my own TypeScript files once I begin using Angular.

Taking the example of the Heroes tutorial, I tried to make it match how I would see my own application being structured.

- app 
-- boot.ts

- Heroes
-- Components
--- HeroDetail.ts
--- HeroList.ts

-- Interfaces
--- IHero.ts

Within this structure, I then attempted to use namespaces for each logical area in order to group them. This resulted in IHero looking like this (for example):

namespace Heroes.Interfaces
{
  export interface IHero
  {
    Id: number;
    Name: string;
  }
}

Building the project in this structure works well until I attempt to add Angular into the mix by way of: import {Component} from 'angular2/core'; When this happens, the file loses all references to other code in the same namespace and there's no way to make it discover them.

I've seen this question asked about the same issue. There, the answer mentions "work arounds". For this reason I'm thinking it's POSSIBLE, but more than that I'm wondering why it ISN'T at the minute? Is this a bug or by design? I've been considering raising it on the TS GitHub but I would like to be a little better informed before going down that route.

Thanks for any advice!

Answer 1

Is this a bug or by design?

This is by design. Don't use namespaces if you are using file modules. Each file is already a module. And your whole project needs a module loader.

Read: Angular 2 Modules vs JavaScript Modules — Angular 2 Architectural Documentation