Angular 12 升级错误：您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件

Question

我已经从 Angular 11 升级到 12，我的许多 Angular 组件都低于错误。

./src/app/virtualspaces/home/home.component.html:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

./src/app/virtualspaces/home/home.component

<div id="enterVirtualSpaces">
  <div class="bgEls">
    <div class="_bgEl1"></div>
    <div class="_bgEl2"></div>
  </div>
  <header>
    <div class="null1"><a class="logo" href="/enter"></a></div>
  </header>
  <div class="maincontent">
    <h2>Enter</h2>
    <a href="/enter/meetings">Meetings</a>
    <a href="/enter/conferences">Conferences</a>
    <a href="/enter/xpos">Expos</a>
  </div>
</div>

我知道 Angular 从 Angular 10 中停止使用 webpack，但我尝试尝试使用 npm i -D @expo/webpack-config 安装 webpack 并在根目录添加 webpack.config.js 文件并添加以下代码：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: ['@ui-kitten/components']
        }
    }, argv);
    return config;
};

没用。

我想了解问题的原因以及解决问题的可能方法，因为在我的 Angular 11 项目中运行良好的许多组件都显示错误并且不允许项目再次编译。

更新 1

使用 ng g c componentPath 生成一个新文件。新文件会立即添加到引发错误的文件中。

我在一些组件中加载了动态组件，这些组件甚至与文件抛出错误无关。这可能是一个可能的来源吗？

另外，我创建了一个新的 Angular 12 项目并逐渐更新文件以查看是否出现错误。

最初我不会收到新生成的组件的错误，直到我复制我的组件文件夹。除了动态导入的动态组件之外，每个组件都是使用 Angular cli 生成的。

这是我动态导入组件的打字稿文件之一

post-box3.component.ts

import {
  Component,
  OnInit,
  Input,
  Output,
  Renderer2,
  ViewChild,
  ElementRef,
  ViewContainerRef,
  ComponentFactoryResolver,
} from "@angular/core";

@Component({
  selector: "app-post-box3",
  templateUrl: "./post-box3.component.html",
  styleUrls: ["./post-box3.component.scss"],
})
export class PostBox3Component implements OnInit {
  @ViewChild("postContent", { read: ViewContainerRef }) postContentEl!: ViewContainerRef;
  constructor(
    private resolver: ComponentFactoryResolver,
    private vcRef: ViewContainerRef,
    private elmRef: ElementRef
  ) {
    this.dynLoadBIComp();
  }

  ngOnInit(): void {}

  async dynLoadBIComp({ 
    const compObj: any = await import(
      "../../../../templates/logo/1/logo1b/logo1b.component"
    );

    const compKeys: any = Object.keys(compObj);    
    this.postContentEl.createComponent(
      this.resolver.resolveComponentFactory(compObj[compKeys[0]])
    );;
  }
}

Answer 1

您的html 是如何加载到应用程序中的？我将假设它不是一个模板。当我们通过require 加载文件（在我们的例子中是图像）时，我们遇到了这个问题。例如，有问题的陈述是

photopath = somepath ? somepath : require('../assets/image-not-found.png');

这引发了与您的相同的异常 - 编译器预期的 JavaScript 代码和 < 是意外的标记。我们用简单的'../assets/image-not-found.png' 替换了require，它解决了这个问题。那么，回到我的第一个问题 - 你如何加载你的 html？