我们如何在没有Angular 9路由的情况下延迟加载具有扩展组件的模块

Question

我们有一种情况，我们希望延迟加载带有一些扩展（继承）组件的模块。我正在使用以下代码。它适用于普通组件。但是我有一个从基本组件扩展的组件。这不适用于这种延迟加载。它无法识别基本组件。

   

     import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { ReactiveFormsModule, FormsModule } from '@angular/forms';
        import { ComponentAComponent } from '../component-a/component-a.component';
        import { ComponentCComponent } from '../component-c/component-c.component';
        
        @NgModule({
          declarations: [ComponentAComponent, ComponentCComponent],
          imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule
          ]
        })
        export class ModuleAModule { }
    
    import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
    
    @Component({
      selector: 'app-component-base',
      templateUrl: './component-base.component.html',
      styleUrls: ['./component-base.component.css']
    })
    export class ComponentBaseComponent implements OnInit {
    
      protected formGroup: FormGroup;
    
      constructor(protected fb: FormBuilder) {
      }
    
      ngOnInit(): void {
        this.createGroup();
      }
    
      createGroup() {
        this.formGroup = this.fb.group({
          name: new FormControl('Base Component')
        });
      }
    }
    
    import { Component, OnInit } from '@angular/core';
    import { ComponentBaseComponent } from '../component-base/component-base.component';
    import { FormBuilder, FormControl } from '@angular/forms';
    
    @Component({
      selector: 'app-component-a',
      templateUrl: './component-a.component.html',
      styleUrls: ['./component-a.component.css']
    })
    export class ComponentAComponent extends ComponentBaseComponent implements OnInit {
    
      constructor(fb: FormBuilder) {
        super(fb);
      }
    
      ngOnInit(): void {
        this.formGroup?.addControl('age', new FormControl(43));
      }
    }
    
    import { Component, Type, Compiler, Injector, ComponentFactory, ViewChild, ViewContainerRef } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      @ViewChild('anchor', { read: ViewContainerRef }) anchor: ViewContainerRef;
    
      title = 'dynamicModuleDemo';
      modules = ['ModuleA', 'ModuleB'];
      componentFactories: ComponentFactory<any>[];
      moduleRef: any;
    
      constructor(private compiler: Compiler, private injector: Injector){}
    
      async loadModule1() {
        this.loadModule(await import('./module-a/module-a.module').then(m => m.ModuleAModule));
        for (const factory of this.componentFactories) {
          this.createComponent(factory);
        }
      }
    
      async loadModule2() {
        this.loadModule(await import('./module-b/module-b.module').then(m => m.ModuleBModule));
        for (const factory of this.componentFactories) {
          this.createComponent(factory);
        }
      }
    
      createComponent(factory: ComponentFactory<any>) {
        //this.anchor.clear();
        this.anchor.createComponent(factory, null, this.moduleRef.injector);
      }
    
      private loadModule(moduleType: Type<any>) {
        this.anchor.clear();
        const moduleFactories = this.compiler.compileModuleAndAllComponentsSync(moduleType);
        this.componentFactories = moduleFactories.componentFactories;
        this.moduleRef = moduleFactories.ngModuleFactory.create(this.injector);
    
        // const componentFactory = moduleRef.instance.resolveComponent();
        // this.componentFactories.push(componentFactory); */
        /* for (const factory of this.componentFactories) {
          const comp = factory.create(this.injector, [], null, moduleRef);
          this.anchor.insert(comp.hostView);
        } */
      }
    }

app.component.html

  <button (click)="loadModule1()">ModuleA</button><br><br>
  <button (click)="loadModule2()">ModuleB</button>
<div class="anchor">
  <ng-container #anchor></ng-container>
</div>
<router-outlet>
</router-outlet>