Thành phần Angular (7) chỉ chấp nhận các tệp html

Thành phần được định nghĩa như thế này:

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

}

Tôi muốn tải vào một số thành phần cụ thể thay vì "app.component.html" một tệp có phần mở rộng htm "app.component.htmlm"

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

từ một số lý do nó không hoạt động nó nói:

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. 

Xin hãy giúp tôi tìm cách tải tập tin htm? Tôi biết rằng có một cách để bootstrap với Webpack, tôi muốn giữ bản dựng hiện tại của ng-phục vụ \ cli angular.json!

Cảm ơn bạn!

Nâng cấp phiên bản góc của bạn lên góc 8, cái này được cố định ở góc 8.

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

Có thể khó sửa đổi cách tải các tệp mẫu của nó, nhưng bạn có thể sử dụng @angular-builders/custom-webpackkết hợp với raw-loadernhập htmtệp của mình vào component.tsvà thay vào đó sử dụng templateUrltrong cấu hình thành phần của bạn sử dụng templatevà đặt nó với giá trị được nhập. Giải pháp gần như được mô tả trong câu hỏi SO này với một số thay đổi mà nó cũng phù hợp với bạn:

1. npm i -D @angular-builders/custom-webpack raw-loader cài đặt các gói yêu cầu

2. Định cấu hình angular.json như dưới đây:

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

3. Thêm extra-webpack.config.jstệp vào cùng thư mục angular.jsonvới nội dung như dưới đây:

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

4. Thêm typings.d.tstệp vào srcthư mục của bạn với nội dung (điều này sẽ tránh được lỗi nhập bản in):

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

5. Và trong htmtệp nhập thành phần của bạn với trình tải thô

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

Tôi đã quản lý để chạy cấu hình này trong địa phương của mình nhưng không thể quản lý để làm cho nó hoạt động trong stackblitz. Ví dụ Stackblitz không hoạt động