Using an external HTML template in AngularJS 1.5 component with Webpack and Typescript

Question

I am trying to load an external html file into my Angular component:

import { LoginController } from './login.controller';
import './login.scss';
import './login.html';

class LoginComponent implements ng.IComponentOptions {

    public template: string;
    public controller: Function;
    public bindings : any;

    constructor(){
        this.controller = LoginController;
        this.bindings = {
            username: '@',
            password: '@'
        };
        this.template = //login.html referred to here
    }

}

export { LoginComponent };

I am using typescript with the following tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true
  },
  "exclude": [
    "typings/main.d.ts",
    "typings/main",
    "node_modules"
  ]
}

And am trying to load with the html-loader.

I am not sure how to reference the imported HTML in the component itself?

The webpack build is valid.

Answer 1

Solved it myself.

I had to add the typescript definition in my typings.json for require.

typings install --save --global require

Works like a charm now :)