Angular（7）コンポーネントはhtmlファイルのみを受け入れます

コンポーネントは次のように定義されています：

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

}

「app.component.html」ではなく、特定のコンポーネントを、「htm.app.component.htm」という拡張子の付いたファイルでロードしたい

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

なんらかの理由で機能しません：

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.

htmファイルをロードする方法を教えてください。私はWebpackでブートストラップする方法があることを知っています。ng-serve\ cli angular.jsonの現在のビルドを維持したいと思います！

ありがとうございました！

angular angular-cli

— マイク
ソース

完全なtsファイルをお送りください

— AliHmede

angularによるとhtmのようなファイルはないので、angularjsを使用している場合にのみ機能するため、サポートしないでください

— harkesh kumar

.htmlファイルではなく.htmを使用する必要があるのはなぜですか。

— ethanfar

カスタムビルダーを使用して、既存の構成とマージされるカスタムWebpack構成を生成するプロセスがあります。これにより、標準化されていないファイルタイプのカスタムローダーを指定できます。私はあなたが必要としている何のために正確な構文を知らないので、私は実際に...。しかし、それを自分自身をやったことがない

— Claies

それは同様行き止まりであるかもしれないので、また....これが表示されますが、8.xで変更されるように、心に留めて

— Claies

回答:

角度バージョンを角度8にアップグレードします。これは角度8で修正されています。

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

— MHS
ソース

テンプレートファイルの角度の読み込み方法を変更するのは難しいかもしれませんが、を使用@angular-builders/custom-webpackしraw-loaderてhtmファイルをインポートしcomponent.ts、代わりにtemplateUrlコンポーネントの構成で使用templateして、インポートした値で設定することができます。解決策はこのSO 質問でほとんど説明されていますが、いくつかの変更点も機能します。

npm i -D @angular-builders/custom-webpack raw-loader 必要なパッケージをインストールする

次のようにangular.jsonを構成します。

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

以下のような内容でextra-webpack.config.js同じディレクトリにファイルを追加しますangular.json：

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

コンテンツを含むtypings.d.tsファイルをsrcフォルダーに追加します（これにより、typescriptインポートエラーが回避されます）。

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

そしてあなたのコンポーネントインポートhtmファイルでローローダー

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

私は自分のローカルでこの構成を実行することができましたが、stackblitzで機能させることができません。Stackblitzが機能しない例

— エルダー
ソース