Search code examples
angularmodulewildcardtypescript2.2

Typescript 2 wildcard module

I am having trouble with importing html templates in my angular 2 app.

In globals.d.ts

 declare module "*.html" {
    const content: string;
    export default content;
}

In app.component.ts

import { Component } from '@angular/core';

import './app.component.css';
import * as template from './app.component.html';

@Component({
    selector: 'app',
    template: <string>template
})
export class AppComponent {
    constructor() {
        console.log('I am App');
    }
}

The app works and the template is loaded but I get this error TS2352: Type 'typeof "*.html"' cannot be converted to type 'string'. Does someone have a workaround?

I would like to do this instead.

import template from './app.component.html';

@Component({
    template: template
})
...

But the transpiled code ends up like this.

var app_component_html_1 = __webpack_require__(653);
...
template: app_component_html_1.default

app_component_html_1 is the string I need. Why do they add the .default?

Solution

  • Modify export default content; to export = content; resolved this typescript error.

    Before Not work

    After Worked

    And the transpiled code should works accordingly (since 'default' is removed).