Angular 不使用路由的网页包绑定

在我的MVC项目中。比如说，我有3个模块，比如angular8项目中的A模块、B模块、c模块。我想单独捆绑每个模块并单独加载，而不使用路由。使用web软件包可以吗？请给出一些想法。有一些选择，但最简单的是使用一个外部软件包，使它对您来说更简单一些

在这里，您可以找到一些关于如何使用“反应式组件加载程序”的简单信息：

另一个选择是不要自己动手。

首先，您需要在angular.json文件中创建一个“lazyModules”路径，以便angular可以告诉WebPack它需要为其创建一个单独的模块

 {
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "lazyModules": [
              "src/app/modules/lazy-loaded.module"
            ]
          }
        }
      }
    }
  }
}

之后，您需要一些东西来加载模块。我们可以

SystemJsNgModuleLoader

对于这一点，就像路由器一样。要使用它，您需要在AppModule中声明它，如下所示：

import { NgModule, SystemJsNgModuleLoader, NgModuleFactoryLoader } from '@angular/core';

@NgModule({
  providers: [
    { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

之后，您需要一个指令，该指令将模块名作为输入，并将根组件注入到当前ViewContainerRef中

在发出指令之前，需要创建一个包含所有延迟加载模块路径的提供程序

import { InjectionToken } from '@angular/core';

export type LAZY_MODULES = {
  widgetSettings: string;
};

export const lazyMap: LAZY_MODULES = {
  widgetSettings: 'src/app/modules/lazy-loaded.module#LazyLoadedModule'
};

export const LAZY_MODULES_MAP = new InjectionToken('LAZY_MODULES_MAP', {
  factory: () => lazyMap
});

现在我们可以创建指令：

@Directive({
  selector: '[loadModule]'
})
export class LoadModuleDirective implements OnInit, OnDestroy {
  @Input('loadModule') moduleName: keyof LAZY_MODULES;
  private moduleRef: NgModuleRef<any>;

  constructor(
    private vcr: ViewContainerRef,
    private injector: Injector,
    private loader: NgModuleFactoryLoader,
    @Inject(LAZY_MODULES_MAP) private modulesMap
  ) {}

  ngOnInit() {
    this.loader
      .load(this.modulesMap[this.moduleName])
      .then((moduleFactory: NgModuleFactory<any>) => {
        this.moduleRef = moduleFactory.create(this.injector);
      });

  }
}

现在，您可以在创建的指令工厂中获取根组件，并在视图中创建根组件

ngOnInit() {
  this.loader
    .load(this.modulesMap[this.moduleName])
    .then((moduleFactory: NgModuleFactory<any>) => {
      this.moduleRef = moduleFactory.create(this.injector);
      const rootComponent = (moduleFactory.moduleType as ModuleWithRoot).rootComponent;

      const factory = this.moduleRef.componentFactoryResolver.resolveComponentFactory(
        rootComponent
      );

      this.vcr.createComponent(factory);
    });
}

希望这有点帮助：）

ngOnInit() {
  this.loader
    .load(this.modulesMap[this.moduleName])
    .then((moduleFactory: NgModuleFactory<any>) => {
      this.moduleRef = moduleFactory.create(this.injector);
      const rootComponent = (moduleFactory.moduleType as ModuleWithRoot).rootComponent;

      const factory = this.moduleRef.componentFactoryResolver.resolveComponentFactory(
        rootComponent
      );

      this.vcr.createComponent(factory);
    });
}

ngOnDestroy() {
  this.moduleRef && this.moduleRef.destroy();
}