Struggling with WebPack's injection of imported dependencies for a TypeScript project. The first challenge is getting TypeScript to recognize the imported module.
In the header.ts file, there is a declaration of a module nested under vi.input, exporting a VIInputDirective class. In the main.ts file, attempts are made to import this exported VIInputDirective class from header.ts, but TypeScript fails to recognize it.
header.ts
module vi.input.header {
import IDirective = angular.IDirective;
export class VIInputDirective implements IDirective {
...
}
}
main.ts
import {VIInputDirective} from "./header.ts"; // Unable to import; Resolve issue
VIInputDirective.whatever(); // Not functional
material.dt.s
declare module vi.input {
...
}
Substituting
import VIMHeaderDirective = vi.input.header.VIInputDirective;
in the main.ts file resolves the issue, but triggers an error during webpack transpile/injection:
VM1469:1Uncaught ReferenceError: vi is not defined
Several approaches were tested like exporting the vi.input.header module directly, using reference syntax to include the file, and removing the nesting of modules - only to find that the latter solution works. However, the preference is to maintain the structure within a nested module.