Using Angular with TypeScript and Namespaces

I am in the process of creating a large-scale application and am trying to evaluate TypeScript and Angular as the underlying technologies to use.

Unfortunately, I had a problem with the namespace of my own TypeScript files as soon as I started using Angular.

Using the Heroes tutorial as an example , I tried to bring it into line with how my own application would look.

- app -- boot.ts - Heroes -- Components --- HeroDetail.ts --- HeroList.ts -- Interfaces --- IHero.ts 

Inside this structure, I tried to use namespaces for each logical area to group them. As a result, IHero looked like this (for example):

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

Building a project in this structure works well until I import {Component} from 'angular2/core'; add Angular to the mix by: import {Component} from 'angular2/core'; When this happens, the file loses all links to other code in the same namespace and cannot make it detect them.

I saw this question asked on the same issue. There the answer mentions "workarounds." For this reason, I think it is POSSIBLE, but, moreover, I wonder why it is NOT in a minute? Is this a mistake or is it intended? I was considering getting it up on TS GitHub, but I would like to be a little better informed before going this route.

Thanks for any advice!

+6
source share
1 answer

Is this a bug or design?

This is by design. Do not 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 versus JavaScript modules - Angular 2 Architectural Documentation

+4
source

All Articles