Angular（7）组件仅接受HTML文件。

Question

组件的定义如下：

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

}

我希望加载一些特定的组件，而不是使用扩展名为 "app.component.html" 的文件，而是使用扩展名为 "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！谢谢！

- Mike

---

请提供完整的ts文件。 - AliAb

什么原因让你使用 .htm 而不是 .html 文件？ - ethanfar

请将您的 webpack.config.js 文件粘贴在这里，这对 Mike 有帮助。 - MHS

@Mike 是的，我确定。我测试过了！ - MHS

@MHS 将其作为答案发布，我会接受并奖励您。 - Mike

Answer 1

可能很难修改Angular如何加载它的模板文件，但是你可以使用@angular-builders/custom-webpack和raw-loader来导入你的htm文件到component.ts中，在组件配置中不再使用templateUrl而是使用template，并将其设置为导入的值。这个解决方案几乎在此SO问题中已经描述了，稍作修改即可适用于你：

1. npm i -D @angular-builders/custom-webpack raw-loader安装所需的包。

2. 像下面这样配置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 示例

- Eldar

Answer 2

将您的Angular版本升级到Angular 8，这个问题已经在Angular 8中得到了修复。

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

- MHS