Import template in typescript without require

Question

I am using typescript with angular 1.5 component. And I have a custom designed decorator where I send template via require. It works except I get a tslint warning. (I don't want to turn off this rule)

require() style import is forbidden

Here is my component

import './main.template.html';

const app: ng.IModule = angular.module('app');
@Component(app, {
  selector: 'mainComponent',
  controllerAs: 'ctrl',
  styleUrls: '',
  template: require('./main.template.html')
})
class MainComponent extends BaseComponent {
   constructor() {
     super();
   }
}

Here is my decorator

export const Component = function(module: ng.IModule, options: {
  selector: string,
  controllerAs?: string,
  styleUrls?: string,
  template?: string,
  templateUrl?: string
}) {
return (controller: Function) => {
   module.component(options.selector, angular.extend(options, {  controller: controller }));
  };
};

I have tried to pass templateUrl instead of template and i get run time error of file not found.

I have also tried to import template as variable and it gives compile time error and looks like it's not supported.

import mytemplate: string from './main.template.html';

I am using webpack. Hence, can't use absolute path from the root.

Do you have any idea how to import template in typescript without using require.

Answer 1

For templateUrl error , check your reference and directory structure.

Or , insert html data inside template :-

@Component(app, {
selector: 'mainComponent',
controllerAs: 'ctrl',
styleUrls: '',
template: `<div>//content
           </div>`
})