Question

问题：仪表板组件呈现存储在数据库中的任意窗口小部件。我设法使其能够正常工作，并且想知道是否还有其他更轻松的方法来完成它。

这就是我所做的（以防万一，我也是如何到达的）：

从文件中延迟加载可能非常简单，类似这样的工作似乎很好

import { Component, OnInit, Type } from '@angular/core'; 
@Component({
  selector: 'app-root',
  template: `
    <ng-container *ngIf="component">
       <ng-template [ngComponentOutlet]="component"></ng-template>
    </ng-container>
  `
})
export class AppComponent implements OnInit {
  component: Type<any>;
  ngOnInit() {
    import('./test/test.component')
    .then(module => this.component = module.TestComponent)
  }
}

由于动态导入角度，使用编译后的组件创建了一个单独的js文件。我尝试编码源代码并做

import('data:text/javascript...').then(...)

产生“找不到模块”错误。声明通配符模块

declare module 'data:text*';

放置了IDE（在我的情况下为VSCode），但是打字稿仍然会在编译时抛出错误，因为打字稿将import转换为require。我在tsconfig中尝试了module和moduleResolution属性的不同组合，但毫无结果。从javascript中的数据URI导入简单测试模块的所有过程似乎都可以正常工作。因此，我尝试将其放入评估中，导入本身可以正常工作，但其余部分却不起作用，这在修改了webpack一段时间后才有意义。我修改了源代码，只声明了该类，并调用angular theta函数注册该组件，删除了对webpackJsonp的推送以及对__webpack_require__.r和__webpack_require__.d的调用，并导出了定义的类。在使用更多的技巧（使用全局变量）解决了一些范围问题之后，它开始起作用。但是后来我意识到，如果我import的话，我根本就不需要使用eval －我不妨评估一下整个过程。我做到了，将组件类分配给变量而不是导出它，它也起作用。

所以，最后，我的方法：

动态导入组件并构建项目以获取编译的js。
修改源：删除推送到webpackJsonp，调用__webpack_require__.r和__webpack_require__.d，将组件类分配给变量。
eval修改后的源。

这行得通（至少对于到目前为止我尝试过的简单组件而言），但是看起来很笨拙。有更好的方法吗？

从数据库延迟加载Angular组件

0 个答案: