Currently, I'm utilizing TypeScript along with Angular 1.5 component. In my scenario, I have a custom decorator in place through which I send templates via require function. The setup is functional; however, I am consistently receiving a tslint warning that I prefer not to disable.
The use of require() for imports is restricted.
Let's take a look at the component implementation:
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();
}
}
Now, let's examine the custom decorator logic:
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 attempted using templateUrl instead of template and encountered a runtime error indicating that the file was not found.
Additionally, trying to import the template as a variable resulted in a compile-time error, suggesting lack of support.
import mytemplate: string from './main.template.html';
Since my project relies on webpack, using absolute paths from the root is not feasible.
If you have any insights on how to import templates in TypeScript without relying on require, please share your thoughts.