Angular (7) component accepts only html files

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

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']
})