Angular 12 upgrade error: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

I have upgraded from Angular 11 to 12 getting below error for many of my angular components.

./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>

I know Angular discontinued the use of webpack from Angular 10 but I tried experimenting with installing webpack with npm i -D @expo/webpack-config and adding a webpack.config.js file at the root and adding this code:

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

It didn't work.

I'll like to understand why the problem and possible ways to fix it as many components that were working fine in my Angular 11 project are showing errors and not allowing the project to compile again.

UPDATE 1

Using ng g c componentPath to generate a new file. The new file is immediately added to the files throwing the error.

I loaded dynamic components in some of the components that are not even related to the files throwing errors. Can this be a possible source?

Also, I created a fresh angular 12 project and gradually updated the files to see if I get errors.

Initially I don't get errors for newly generated components until I copy my components folder over. Every component was generated using angular cli except dynamic components which are dynamically imported.

Here's one of my typescript files importing a component dynamically

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]])
    );;
  }
}