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!

angular angular-cli

— Miguel
fuente

envíenos el archivo ts completo

— AliHmede

becuause según angular no hay ningún archivo como htm por lo que no la soporte único trabajo si está utilizando AngularJS

— harkesh Kumar

¿Qué te obliga a usar archivos .htm en lugar de archivos .html?

— ethanfar

Hay un proceso para usar un generador personalizado para generar una configuración de paquete web personalizado que se combina con la configuración existente, lo que le permite especificar cargadores personalizados para tipos de archivos no estandarizados. Sin embargo, nunca lo he hecho, así que no sé la sintaxis exacta de lo que necesitas ...

— Claies

También tenga en cuenta que esto parece estar cambiando en 8.x, por lo que también podría ser un callejón sin salida ...

— Claies

Respuestas:

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

— MHS
fuente

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:

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

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

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

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

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

— Eldar
fuente