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" 扩展名为 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 bootstrap，我想保留 ng-serve\cli angular.json!

的当前版本

谢谢！

Answer 1

可能很难修改 angular 加载其模板文件的方式，但您可以使用 @angular-builders/custom-webpack 结合 raw-loader 在 [=17= 中导入您的 htm 文件] 而不是在您的组件配置中使用 templateUrl 使用 template 并将其设置为导入的值。这个 SO 中几乎描述了该解决方案，并进行了一些更改，它也适用于您：

npm i -D @angular-builders/custom-webpack raw-loader install required packages

Configure angular.json like below :

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

Add extra-webpack.config.js file into same directory with angular.json with contents like below :

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

Add typings.d.ts file into your src folder with content (this will avoid typescript import errors):

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

And in your component import htm file with 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 {
}

我已经设法运行在我的本地进行此配置，但无法使其在 stackblitz 中工作。 Stackblitz 不工作 example

Answer 2

将您的 angular 版本升级到 angular 8，此问题已在 angular 8 中修复。

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

Angular (7) 组件只接受 html 个文件

Angular (7) component accepts only html files

angular-cli

angular