O componente Angular (7) aceita apenas arquivos html

O componente é definido assim:

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

}

Gostaria de carregar alguns componentes específicos em vez de "app.component.html" um arquivo com extensão htm "app.component.htm"

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

por algum motivo não funciona, diz:

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. 

Por favor me ajude a encontrar uma maneira de carregar um arquivo htm? Estou ciente de que existe uma maneira de inicializar com o Webpack. Gostaria de manter a compilação atual do ng-serve \ cli angular.json!

Obrigado!

Atualize sua versão angular para o angular 8, isso é corrigido no angular 8.

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

Pode ser difícil modificar a forma como o angular carrega seus arquivos de modelo, mas você pode usar @angular-builders/custom-webpackcombinado com raw-loaderimportar seu htmarquivo component.tse, em vez disso, usar templateUrlna configuração de componente templatee configurá-lo com valor importado. A solução está quase descrita nesta questão SO, com algumas alterações que também funcionam para você:

1. npm i -D @angular-builders/custom-webpack raw-loader instalar pacotes necessários

2. Configure angular.json como abaixo:

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

3. Adicione o extra-webpack.config.jsarquivo no mesmo diretório angular.jsoncom o conteúdo abaixo:

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

4. Adicione um typings.d.tsarquivo à sua srcpasta com conteúdo (isso evitará erros de importação datilografada):

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

5. E no seu htmarquivo de importação de componentes com o carregador bruto

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 {
}

Eu consegui executar essa configuração no meu local, mas não consigo fazê-la funcionar no stackblitz. Exemplo de Stackblitz não funcionando