Ts-loader: No namespace dependency resolve

[rafiek]

I have the same problem as described here:
http://stackoverflow.com/questions/36894998/javascript-webpacktypescriptnamespace-internal-module

I have seen in the docs that ts-loader will search for import and require statements to resolve dependencies. I am not able to find a way to make ts-loader resolve namespaces. I think it is actually a missing feature in ts-loader. Is there a workaround?

[s-panferov]

@rafiek how do you want namespaces to be resolved? Could you please provide a minimal code example?

[rafiek]

example:

myApp.ts contains:

namespace myApp {
    angular.module('myApp, [])
        .component('myComponent', new myComponent());
}

myComponent.ts contains:

namespace myApp{
    export class myComponent {
        public static NAME = 'myComponent';
    }
}

When I use ts-loader in webpack it does transpile and bundle the myApp.ts in the target file. However, it doesn't transpile and bundle the myComponent dependency in the target file.

[s-panferov]

@rafiek I believe that you can't use this module style with webpack at all, because this is not how loaders and webpack work.

The main problem is dependency resolution process. It's impossible to understand module dependencies and to find out which modules need to be included in bundle with this module style. The only way is to just concat all the sources together (what tsc can do by itself without webpack).

[rafiek]

I read about adding reference paths in the .ts files so that the compiler knows which dependencies to resolve:
http://www.typescriptlang.org/docs/handbook/namespaces.html

I think this helps understanding module dependencies even when using this module style. What do you think? Can this be used in ts-loader?

[s-panferov]

If you have to add reference files on top of each module what is the benefit?

Anyway, the second problem is how TS transpiles such modules:

a.ts original:

namespace a {
  export var test = 1;
}

a.ts transpiled:

var a;
(function (a) {
    a.test = 1;
})(a || (a = {}));

As you can see, a is a local variable. This works with simple concatenation because a hoists. But webpack wraps each module into an anonymous function, so a variable will be unique for each module.

Right now I can't imagine a way to make it work. So I highly recommend you to use standard es6 module resolution style with webpack.

If you still want to use webpack's possibilities with this module style I think the only way is to split your workflow:

1. Check and concat you app using tsc.
2. Process result bundle from step (1) with webpack.

[blakeembrey]

Thanks @s-panferov! 😄

As @s-panferov mentions, module loading is not built for namespaces - they only work if you're manually working with the files and putting them into <script /> or something similar. In no other places you can you be using namespace merging as a global, because once you use import or export that file becomes an external module and the namespace merging stops working. I would also recommend you use import and export if you intend to use Webpack (or any other front-end build step).