Die Angular (7) -Komponente akzeptiert nur HTML-Dateien

Die Komponente ist wie folgt definiert:

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

}

Ich möchte in einige bestimmte Komponenten anstelle von "app.component.html" eine Datei mit der Erweiterung htm "app.component.htm" laden.

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

Aus irgendeinem Grund funktioniert es nicht. Es heißt:

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.

Bitte helfen Sie mir, einen Weg zu finden, um eine HTML-Datei zu laden. Ich bin mir bewusst, dass es eine Möglichkeit gibt, mit Webpack zu booten. Ich möchte den aktuellen Build von ng-serve \ cli angle.json beibehalten!

Vielen Dank!

angular angular-cli

— Mike
quelle

Bitte geben Sie uns die vollständige ts-Datei

— AliHmede

Weil es laut Angular keine Datei wie htm gibt, also nicht unterstützen, funktioniert es nur, wenn Sie anglejs

— harkesh kumar verwenden

Was zwingt Sie dazu, .htm anstelle von .html-Dateien zu verwenden?

— Ethanfar

Es gibt einen Prozess, bei dem ein benutzerdefinierter Builder verwendet wird , um eine benutzerdefinierte Webpack-Konfiguration zu generieren, die mit der vorhandenen Konfiguration zusammengeführt wird. Auf diese Weise können Sie benutzerdefinierte Loader für nicht standardisierte Dateitypen angeben. Ich habe es jedoch nie selbst gemacht, daher kenne ich die genaue Syntax für das, was Sie brauchen, nicht ...

— Claies

Denken Sie auch daran, dies scheint sich in 8.x zu ändern, so dass es auch eine Sackgasse sein könnte ....

— Claies

Antworten:

Aktualisieren Sie Ihre Winkelversion auf Winkel 8, dies ist in Winkel 8 festgelegt.

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

— MHS
quelle

Es kann schwierig sein, den Winkel zu ändern, mit dem die Vorlagendateien geladen werden. Sie können sie jedoch in @angular-builders/custom-webpackKombination mit dem raw-loaderImportieren Ihrer htmDatei verwenden component.tsund stattdessen templateUrlin Ihrer Komponentenkonfiguration verwenden templateund mit dem importierten Wert festlegen. Die Lösung ist in dieser SO- Frage fast beschrieben mit einigen Änderungen funktioniert sie auch für Sie:

npm i -D @angular-builders/custom-webpack raw-loader Installieren Sie die erforderlichen Pakete

Konfigurieren Sie angle.json wie folgt:

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

Fügen Sie eine extra-webpack.config.jsDatei in dasselbe Verzeichnis angular.jsonmit folgenden Inhalten hinzu:

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

Fügen Sie typings.d.tsIhrem srcOrdner eine Datei mit Inhalt hinzu (dies vermeidet Fehler beim Importieren von Typoskripten):

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

Und in Ihrer Komponente Importdatei htmmit 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 {
}

Ich habe es geschafft, diese Konfiguration in meinem lokalen System auszuführen, kann sie jedoch nicht in Stackblitz zum Laufen bringen. Nicht funktionierendes Stackblitz- Beispiel

— Eldar
quelle