CODEWITHSUNDEEP
angularjstypescript
Jose the hose
Jose the hose

Reputation: 1895

Using 'import * as' in a typescript component gives an error -

I'm trying to import a html template into a typescript component and its giving me an error. I'm using Angular 1.5.

The component looks like this...

import * as template from './home.template.html';
import { HomeController } from './home.controller';

export const HomeComponent = {
    bindings: {
        conf: '<',
    },
    controller: HomeController,
    template,
};

And thats added to the module like this...

import * as angular from 'angular';

import { HomeComponent } from './home.component';

export const HomeModule = angular.module('home', [])
.component('home', HomeComponent);

And the error I am getting is...

Argument of type '{ bindings: { conf: string;}; controller: typeof HomeCon...' is not assignable to parameter of type 'IComponentOptions'. Types of property 'template' are incompatible.. Type 'typeof '.html'' is not assignable to type 'string | ((...args: any[]) => string) | (string | ((...args: any[]) => string))[]'. Type 'typeof '.html'' is not assignable to type '(string | ((...args: any[]) => string))[]'. Property 'find' is missing in type 'typeof '*.html''.

If I add template: template.toString() to the HomeComponent it seems to work. But that doesn't feel right to me. Any other suggestions?

Upvotes: 0

Views: 1854

Answers (1)

Kalle
Kalle

Reputation: 3907

Somewhere in your type declarations you need to declare a module ending on .html

declare module '*.html' {
    const template: string;
    export default template;
}

with this declaration your code should run without another change

Upvotes: 2

Related Questions