Question: I have a project that was originally build on Typescript 1.4

It has a primary file setup like so:

```
/// <reference path="typedefinitions/jquery/jquery.d.ts" />
/// <reference path="typedefinitions/jqueryui/jqueryui.d.ts" />
/// <reference path="typedefinitions/moment/moment.d.ts" />
module myApp {
   ...
}

```

Where all other files just reference this main file:

```
/// <reference path="../mainfile.ts" />
module myApp {
   //more code that can reference anything else in myApp
}

```

Part of our build process concats all of our application typescript files together, so we aren't using any module loaders.

In the past this has worked fine, however, more and more libraries have their definition files setup with `import`'s, and referencing them using the above methodology doesn't work.

Taking `ui-router`for example, if I add:

```
/// <reference path="../node_modules/angular-ui-router/lib/index.d.ts"  />

```

The types referenced don't seem to appear anywhere. If I do this:

```
import * as router from 'angular-ui-router';

```

Then all of the other files can no longer reference 'myApp'.

What's my best bet on refactoring my way out of this situation while still being able to compile all TS files down to a single javascript file?

Is there a tsconfig setting I can change? Or something else I'm missing?

Answer: 
You have a couple of options here. 

The recommended approach
------------------------

These days the option with the least friction is including a bundler to handle your single file needs and using the ES6-style module system to establish dependencies (what used to be known as external modules). The namespace system to my knowledge is not officially deprecated but in my opinion from looking at the community the namespace system has basically been abandoned. It's incompatible with import statements and the @types system, which most of the examples and code you'll see will be using. Following through with this option will require establishing explicit dependencies through imports in each file rather than taking advantage of the C# style namespaces. 

You can then use something like systemjs, uglify, browserify, etc. to walk the tree of dependencies and create a javascript bundle. In principle some people prefer this purely to separate out the task of compilation from minification and bundling. This will also resolve some out of order issues you may encounter from using purely namespaces because each file (module) specifies its exact dependencies explicitly. 

Other Options
-------------

You can make do with namespaces in the short term by manually downloading the .d.ts file from the DefinitelyTyped repo (or of course using typings, which I would recommend if you follow this route). Several npm packages are now listing @types packages in their dependencies, so you may need to set the `types: []` config property to make sure that nothing from @types is used and so avoid conflicts.

While this is still a workable option, I recommend adopting ES6 modules. This isn't a matter for typescript to decide, the JS community is very clearly moving in that direction and as a superset of JS, major structural JS decisions will trickle down the TS and this will become the default. I feel namespaces will quickly become legacy code, some consider namespaces legacy already.
Paarth, I think I'm going to go about handling the issue in a similar way angular 2 does, where I'll register child components in their parent components:

hello.component.ts:

```
import Component from './component.decorator';

@Component('hello', {
    controllerAs: 'vm',
    template: '<div>Hi</div>'
})
export default class HelloComponent { }

```

app.component.ts:

```
import Component from './component.decorator';
import HelloComponent from './hello.component';

@Component('app', {
    controllerAs: 'vm',
    directives: [HelloComponent],
    template: `<div>
                <div>{{vm.Message}}</div>
                <hello></hello>
               </div>`
})
export class AppComponent {
    Message: string;

    $onInit() {
        this.Message = 'Hi!!!';
    }
}

```

component.decorator.ts:

```
import * as angular from 'angular';
import app from './main';

export interface ComponentBridgeOptions extends ng.IComponentOptions {
    directives?: any[];
}

export default function Component(selector: string, options: ComponentBridgeOptions) {
    return (controller: Function) => {
        app.component(selector, angular.extend(options, { controller: controller }));
    }
}

```