Angular 基础教程: 模块预加载

Posted 2023-03-23

参考技术A 我们在前面的实例基础上继续修改，为了方便接下来演示“模块预加载”，我们增加了一个一级导航菜单叫做“图片”：

现在我们有 3 个独立的模块：首页、段子、图片。只有当用户点击这些模块的时候，路由才会去异步加载对应的 chunk（块），就像这样：

一切看起来都那么完美！但是，产品经理又妖娆地走过来了，他对你说：小伙子干得不错！但是我有一个想法，你看能不能实现。虽然这种异步加载的方式确实能提升加载和执行的效率，但是用户体验并没有做到极致。你看啊，咱们是一个段子站，根据我们的统计数据，这 3 个模块用户都是一定会点的。所以，在首页模块加载完成之后，如果能把“段子”和“图片”这两个模块预先加载到客户端就好了。这样当用户点击这两个菜单的时候，看起来就像“秒开”一样，这才叫“极致体验”对吧？怎么样，有没有技术上的困难？下班之前能改好吧？

Angular 远程加载模块不会将入口组件加载到视图中

【中文标题】Angular 远程加载模块不会将入口组件加载到视图中

【英文标题】：Angular Remotely loaded Module does not load entry component into view

【发布时间】：2021-06-16 06:30:34

【问题描述】：

背景：

我已经按照多个教程远程加载模块，以便尝试使用 Angular 创建插件架构。特别是：

我将 Angular 10 用于主应用程序 用于构建插件的角度构建器 汇总以生成 UMD 模块。 SystemJS 作为模块加载器

手头的问题：

我可以成功加载远程定义的模块，并且远程模块可以成功使用公共服务（我的意思是主或核心应用程序和插件都知道） 我无法动态加载该模块中定义的组件，即使该组件是在插件模块声明、导出和模块本身中的入口组件中定义的。

代码如下：

https://github.com/rickszyr/angular-plugins/

如何运行：

npm 安装 npm run build:init //编译通用服务 npm run build:plugins // 为两个插件生成 umd 包 npm run start:all // 启动服务器和客户端 使用默认字段值单击“加载” 出现错误。

错误：

我发现由于某种原因，组件主机视图没有初始化 _lview 值。但我不确定如何处理这些信息或如何确保它确实具有正确设置的值。

尝试创建组件并将其插入动态组件加载器时，失败的行位于 app.component.ts 中。

非常感谢您

主要组件：

app.component.ts

import  Compiler, Component, ComponentFactoryResolver, Injector, NgModuleFactory, ViewChild, ViewContainerRef  from "@angular/core";
import  HttpClient  from "@angular/common/http";
import  IPlugin, PluginCatalogService  from "interfaces";

import * as ngCore from "@angular/core";
import * as ngCommon from "@angular/common";
import * as ngBrowser from "@angular/platform-browser";
import * as commonInterfaces from "interfaces";
import  ModuleLoader  from "./remote-module-loader.service";
import  DynamicComponentDirective  from "./directives/dynamic-component.directive";

@Component(
  selector: "app-root",
  templateUrl: "app.component.html",
  styles: [],
)
export class AppComponent 
  title = "plugins";
  loader: ModuleLoader;
  
  @ViewChild('putStuffHere', read: ViewContainerRef) putStuffHere: ViewContainerRef;

  constructor(
    public pluginService: PluginCatalogService,
    private injector: Injector,
    private factoryResolver: ComponentFactoryResolver,
    private compiler: Compiler,
    public viewContainer: ViewContainerRef
  ) 
    this.loader = new ModuleLoader();
  


  loadModule(modulePath: string, moduleName: string) 
    this.loader.register(
      "@angular/core": ngCore,
      "@angular/common": ngCommon,
      "interfaces": commonInterfaces
    ).then(ml => ml.load(modulePath).then(m => 
      const moduleFactory: NgModuleFactory<any> = <NgModuleFactory<any>>m.default[moduleName+ "NgFactory"];

      const moduleReference = moduleFactory.create(this.injector);
      moduleReference.componentFactoryResolver.resolveComponentFactory((<IPlugin>moduleReference.instance).mainComponent);
      var compFactory = moduleReference.componentFactoryResolver.resolveComponentFactory(this.getEntryComponent(moduleFactory));

      this.putStuffHere.createComponent(compFactory); // <<< this fails

      var component = compFactory.create(this.injector); 
      this.putStuffHere.insert(component.hostView);// <<< this fails
      
    ));
  

  getEntryComponent(moduleFactory: any):any 
    var existModuleLoad = (<any>moduleFactory.moduleType).decorators[0].type.prototype.ngMetadataName === "NgModule"
    if (!existModuleLoad) return null;
    return moduleFactory.moduleType.decorators[0].args[0].entryComponents[0];
  

app.component.html

<h1>Welcome!</h1>

<p>
    <label>Path Remote</label><input #pathRemote value="http://localhost:3000/plugin2.module.umd.js">
</p>
<p>
    <label>Remote Name</label><input #remoteName value="Plugin2Module">
</p>

<p>
    <button (click)="loadModule(pathRemote.value, remoteName.value)">Load</button>
</p>

<ol>
    <li *ngFor="let module of pluginService.installedPlugins"> module.name</li>
</ol>

<ng-container #putStuffHere></ng-container>

编译的插件代码：

(function (global, factory) 
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('interfaces')) :
  typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', 'interfaces'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Plugin2Module = , global.i0, global.i3, global.i4));
(this, (function (exports, i0, i3, i4)  'use strict';

  /**
   * @fileoverview added by tsickle
   * Generated from: lib/plugin2.component.ts
   * @suppress checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode checked by tsc
   */
  class Plugin2Component 
      constructor() 
          this.title = "Nada";
      
      /**
       * @return ?
       */
      ngOnInit() 
      
  
  Plugin2Component.decorators = [
       type: i0.Component, args: [
                  selector: 'lib-plugin2',
                  template: `
    <p>
      plugin2 works!
    </p>
  `
              ] 
  ];
  /** @nocollapse */
  Plugin2Component.ctorParameters = () => [];
  Plugin2Component.propDecorators = 
      title: [ type: i0.Input ]
  ;

  /**
   * @fileoverview added by tsickle
   * Generated from: lib/plugin2.module.ts
   * @suppress checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode checked by tsc
   */
  class Plugin2Module 
      /**
       * @param ? pluginService
       */
      constructor(pluginService) 
          console.log("Se registro Plugin 2");
          pluginService.installedPlugins.push(this);
      
      /**
       * @return ?
       */
      get name() 
          return "Plugin 2";
      
      /**
       * @return ?
       */
      get mainComponent() 
          return Plugin2Component;
      
  
  Plugin2Module.decorators = [
       type: i0.NgModule, args: [
                  declarations: [Plugin2Component],
                  imports: [i3.CommonModule],
                  exports: [Plugin2Component],
                  entryComponents: [Plugin2Component]
              ,] 
  ];
  /** @nocollapse */
  Plugin2Module.ctorParameters = () => [
       type: i4.PluginCatalogService 
  ];

  /**
   * @fileoverview This file was generated by the Angular template compiler. Do not edit.
   *
   * @suppress suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes,extraRequire
   * tslint:disable
   */
  var styles_Plugin2Component = [];
  var RenderType_Plugin2Component = i0.ɵcrt( encapsulation: 2, styles: styles_Plugin2Component, data:  );
  function View_Plugin2Component_0(_l)  return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "p", [], null, null, null, null, null)), (_l()(), i0.ɵted(-1, null, [" plugin2 works! "]))], null, null); 
  function View_Plugin2Component_Host_0(_l)  return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 1, "lib-plugin2", [], null, null, null, View_Plugin2Component_0, RenderType_Plugin2Component)), i0.ɵdid(1, 114688, null, 0, Plugin2Component, [], null, null)], function (_ck, _v)  _ck(_v, 1, 0); , null); 
  var Plugin2ComponentNgFactory = i0.ɵccf("lib-plugin2", Plugin2Component, View_Plugin2Component_Host_0,  title: "title" , , []);

  /**
   * @fileoverview This file was generated by the Angular template compiler. Do not edit.
   *
   * @suppress suspiciousCode,uselessCode,missingProperties,missingOverride,checkTypes,extraRequire
   * tslint:disable
   */
  var Plugin2ModuleNgFactory = i0.ɵcmf(Plugin2Module, [], function (_l)  return i0.ɵmod([i0.ɵmpd(512, i0.ComponentFactoryResolver, i0.ɵCodegenComponentFactoryResolver, [[8, [Plugin2ComponentNgFactory]], [3, i0.ComponentFactoryResolver], i0.NgModuleRef]), i0.ɵmpd(4608, i3.NgLocalization, i3.NgLocaleLocalization, [i0.LOCALE_ID]), i0.ɵmpd(1073742336, i3.CommonModule, i3.CommonModule, []), i0.ɵmpd(1073742336, Plugin2Module, Plugin2Module, [i4.PluginCatalogService])]); );

  exports.Plugin2ModuleNgFactory = Plugin2ModuleNgFactory;

  Object.defineProperty(exports, '__esModule',  value: true );

)));

插件的tsconfig.lib.json：

/* To learn more about this file see: https://angular.io/config/tsconfig. */

  "extends": "../../tsconfig.json",
  "compilerOptions": 
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ]
  ,
  "angularCompilerOptions": 
    "enableIvy": false,
    "skipTemplateCodegen": false,
    "strictMetadataEmit": true,
    "annotateForClosureCompiler": true,
    "enableResourceInlining": true
  ,
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]

【参考方案1】：

您在插件中禁用了 Ivy 编译器，但忘记在主项目中禁用它。

在主tsconfig.json 中添加以下内容将解决问题

"angularCompilerOptions": 
  "enableIvy": false

感谢@DWhitSlaya 在此提及这一点：https://www.reddit.com/r/angular/comments/ih7hib/how_to_use_viewcontainerref_with_dynamic/g30hpzv

【讨论】：

是的！经过大量的谷歌搜索，我能够弄清楚这一点。太感谢了。我现在还设法在没有禁用常春藤的情况下运行所有​​内容，这太棒了，因为这是前进的方向