Import class in nested module typescript

Question

I'm trying to create hybrid angular 1 + angular 2 with webpack I have a problem with nested module

//a.ts

module a.b.c {
   export class A {
  }
}

//b.ts

 module a.b.c {
   export class B extends A {
  }
}

Code compiling but I'm getting A is undefined I tried import in various of ways but nothing seems to work What am I'd doing wrong?

"I tried import in various of ways..." Can you show any examples of your attempts? — Claies, Feb 27 '17 at 18:39
היי אורית the `module` keyword isn't really related to "real" modules. It actually means "create internal module" in typescript. And internal modules don't play nicely together with real external modules and it's recommended not to mix them. So before I write a really long answer for nothing - can you transform your code to just use real modules (meaning - just write `export class A` without wrapping it in module keyword)? Or you're working in legacy code with lots of internal modules? — Aviad Hadad, Feb 27 '17 at 21:46
Would also recommend you looking here about mixing external and internal modules - http://stackoverflow.com/questions/30357634/how-do-i-use-namespaces-with-typescript-external-modules — Aviad Hadad, Feb 27 '17 at 21:53
Removing the module and just write export class A will work (please see my answer) — Orit Barda, Feb 28 '17 at 07:46

score 0 · Answer 1 · answered Feb 27 '17 at 22:59

You need to add a reference to a.ts in b.ts.

So, just edit your b.ts as following:

/// <reference path="./a.ts" />
  module a.b.c {
   export class B extends A {
     public second;
  }
}

In addition, you need to include the a.ts before b.ts in your html file:

<script src="./a.js"></script>
<script src="./b.js"></script>

Otherwise, you will get an error.

score 0 · Answer 2 · answered Feb 28 '17 at 07:45

That's the way it worked before, but now when we added webpack i read that using reference is not best practice, and webpack not compiling it.

If i just remove the module, than there is not problem. but like you said this is a legacy code with lots of internal modules. If there is no good way of doing that, and the best practice is to remove the module than we may just do that.

score 0 · Answer 3 · answered Feb 28 '17 at 16:11

Ok, so i'll start by saying again there is indeed no really good way to do this with webpack, and unless this is an enormous project, moving to external modules is the way to go.

if most of your files look like this:

//a.ts

module a.b.c {
  export class A {}
}

//b.ts

module d.e.f {
  export class B extends a.b.c.A
}

Than it's relatively easier, you just do:

//a.ts

export module a.b.c {
  export class A {}
}

//b.ts

import {a} from './a';
module d.e.f {
  export class B extends a.b.c.A
}

However, in the example you gave, you have two files composing the same namespace\internal module - a.b.c. This is harder to deal with and you'll need to do some ugly stuff like:

//b.ts

import {aImported} from './a';
module a.b.c {
  export class B extends aImported.b.c.A
}

In this solution, your files are external modules and they export internal modules.

There is also a different approach, which is to take all your old code, and compile + concat it old school using Gulp\Grunt, before passing the resulting js file to webpack. I did this in the past and I regret it and has since moved away from it. But it does require the least amount of changes to code which is the main benefit of it. Overall, I think it's even worse than the previous solution...

Import class in nested module typescript

3 Answers3