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!

angular angular-cli

— Mike
fonte

forneça-nos o arquivo ts completo

— AliHmede 26/12/19

becuause acordo com angular não há nenhum arquivo como htm por isso não apoiá-lo só funcionará se você estiver usando AngularJS

— harkesh Kumar

O que força você a usar arquivos .htm em vez de arquivos .html?

— 21419 ethanfar

Há um processo para usar um construtor personalizado para gerar uma configuração personalizada do webpack que é mesclada com a configuração existente, permitindo especificar carregadores personalizados para tipos de arquivo não padronizados. Eu nunca realmente fiz isso, no entanto, para que eu não sei a sintaxe exata para o que você está precisando ....

— Claies

também ter em mente, isso parece estar mudando em 8.x por isso pode ser um beco sem saída, bem ....

— Claies

Respostas:

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

— MHS
fonte

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ê:

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

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

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

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

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

— Eldar
fonte