El componente angular (7) acepta solo archivos html

El componente se define así:

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

}

Me gustaría cargar algunos componentes específicos en lugar de "app.component.html" un archivo con extensión htm "app.component.htm"

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

por alguna razón no funciona dice:

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, ayúdame a encontrar una manera de cargar un archivo htm? Soy consciente de que hay una manera de arrancar con Webpack, ¡me gustaría mantener la compilación actual de ng-serve \ cli angular.json!

¡Gracias!

Actualice su versión angular a angular 8, esto se corrige en angular 8.

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

Puede ser difícil modificar cómo angular cargar sus archivos de plantilla, pero puede usarlo @angular-builders/custom-webpackcombinado con raw-loaderimportar su htmarchivo component.tsy, templateUrlen su lugar, usar el uso de configuración de su componente templatey configurarlo con el valor importado. La solución casi se describe en esta pregunta SO con algunos cambios que también funciona para usted:

1. npm i -D @angular-builders/custom-webpack raw-loader instalar paquetes requeridos

2. Configure angular.json como a continuación:

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

3. Agregue el extra-webpack.config.jsarchivo en el mismo directorio angular.jsoncon los siguientes contenidos:

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

4. Agregue el typings.d.tsarchivo a su srccarpeta con contenido (esto evitará errores de importación de mecanografía):

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

5. Y en el htmarchivo de importación de componentes con el cargador sin procesar

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

He logrado ejecutar esta configuración en mi local, pero no puedo hacer que funcione en stackblitz. Ejemplo de Stackblitz que no funciona