Angular (7) component accepts only html files

Question

Component is defined like this:

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {

}

I would like to load in some specific components instead of "app.component.html" a file with extention htm "app.component.htm"

@Component({
  selector: 'app-root',
  templateUrl: './app.component.htm',
  styleUrls: ['./app.component.less']
})

from some reason it doesnt work it says:

ERROR in ./app.component.htm 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
<p>
  app component works!
</p>
｢wdm｣: Failed to compile. 

Please help me find a way to load an htm file? I am aware that there is a way to bootstrap with Webpack, I would like to keep the current build of ng-serve\cli angular.json!

Thank you!

Answer 1

Upgrade your angular version to angular 8, this is fixed in angular 8.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.htm',
  styleUrls: ['./app.component.less']
})

Answer 2

It may be hard to modify how angular load its template files but you can use @angular-builders/custom-webpack combined with raw-loader import your htm file in component.ts and instead using templateUrl in your component config use template and set it with imported value. The solution is almost described in this SO question with some changes it works for you too :

1. npm i -D @angular-builders/custom-webpack raw-loader install required packages

2. Configure angular.json like below :

"build": {
          "builder": "@angular-builders/custom-webpack:browser", // change builder
            "options": {
                "customWebpackConfig": { // add custom config
                     "path": "./extra-webpack.config.js"
                  }, // keep the rest same

3. Add extra-webpack.config.js file into same directory with angular.json with contents like below :

module.exports = {
  module: {
    rules: [
      {
        test: /\.htm$/, // this just tells use raw-loader to load *.htm files
        use: 'raw-loader'
      }
    ]
  }
};

4. Add typings.d.ts file into your src folder with content (this will avoid typescript import errors):

declare module '*.htm' {
  const value: string;
  export default value;
}

5. And in your component import htm file with raw loader

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

import str from 'raw-loader!./app.component.htm';

@Component({
  selector: 'app-root',
  template: str, // notice not url just string
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

I have managed to run this configuration in my local but can't manage to make it work in stackblitz. Non working Stackblitz example