Question

我有一个图书馆项目，其中有一个模块和几个组件。在我的实际应用程序中，我想动态地加载库模块并渲染组件。一切在开发模式下都可以正常工作，但是当我在生产模式下运行应用程序时，总是从工厂（使用moduleFactory.componentFactories）获取空的组件数组。下面是我的代码。谁能帮我这个忙。我正在使用Angular 9.1.0。

 _xn =  (center.x() + std::cos(angle) * xn - std::sin(angle) * yn);
 _yn = (center.y() + std::sin(angle) * xn + std::cos(angle) * yn);

Answer 1

我们按照以下方式进行工作。希望这可以帮助其他人。

import { Injectable, Compiler, Injector, ComponentFactory, ComponentFactoryResolver } from '@angular/core';
import { ReplaySubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class LazyLoaderService {
  private modules: Map<string, ReplaySubject<any>> = new Map();
  private componentRegistry: any[] = [
    { type: "textbox", className: "ApptorCorecompsWrapperComponent", moduleName: "ApptorCorecompsModule" }
  ];
  constructor(private compiler: Compiler, private injector: Injector,
    private factoryResolver: ComponentFactoryResolver) {

  }

  public async getComponentFactory(componentType: string): Promise<ComponentFactory<any>> {
    //this.loadComponent();
    const compInfo = this.componentRegistry.find(c => c.type === componentType);
    if (!compInfo)
      throw new Error("Invalid component type:" + componentType);

    let modSubject = this.modules.get(compInfo.moduleName);
    if (!modSubject) {
      modSubject = this.loadModule(compInfo.moduleName);
    }
    let ret: Promise<ComponentFactory<any>> = new Promise((resolve, reject) => {
      modSubject.subscribe(async (moduleRef) => {
        //await this.compileModule(mod);
        const compType = moduleRef.instance.controls[compInfo.className];
        if (compType) {
          let componentFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(compType);
          // let componentFactory =  this.factoryResolver.resolveComponentFactory(compType);

          resolve(componentFactory);
        } else {
          console.error("Component :" + compInfo.className + " not found");
          reject(null);
        }
      });

    });
    return ret;


  }

  public loadModule(moduleName): ReplaySubject<any> {
    //let mod:any = null;
    let mod: ReplaySubject<any> = new ReplaySubject();

    switch (moduleName) {
      case 'ApptorCorecompsModule':
        import('@apptor/corecomps').then(async m => {
          let mm = m[moduleName]
          mm = await this.compileModule(mm);
          mod.next(mm);
          //return mm; 
        });
        break;
    }
    if (mod) {
      this.modules.set(moduleName, mod);
      return mod;
    }
    else {
      console.error("Failed to load module: " + moduleName);
      throw new Error("Failed to load module: " + moduleName);
    }
  }
  private async compileModule(module: any) {
    let ret: Promise<any> = new Promise((resolve, reject) => {
      this.compiler.compileModuleAsync(module).then(factory => {

        const moduleRef = factory.create(this.injector);
        resolve(moduleRef);
      });
    });
    return ret;
  }
}

角度9-生产模式下的模块延迟加载不起作用

1 个答案: