Question

在此先感谢任何可以帮助回答此问题的人。过去，我在Vue中使用过Webpack代码拆分，类似于所见的in this video。这非常简单，您只需执行以下操作即可使用Webpack的import方法：

const myComponent = () => import('/path/to/myComponent');

我正在尝试在Angular 5.2（或更高版本）中执行类似的操作。有人知道这是否可能吗？

具体来说，我正在尝试将一个模式代码拆分为自己的捆绑包，然后延迟加载该捆绑包，以便不将其加载到初始视图中。单击实际按钮后，我才真正需要它。看起来像这样：

this.dialog.open(DialogComponent, {
  // dialog component details
});

我尝试过类似的事情：

import('./DialogComponent').then(component => {
  const DialogComponent = component;
    this.dialog.open(DialogComponent, {
      // dialog component details
   });
});

但是它并没有真正起作用。我可以得到该组件，但是我一直从TypeScript中得到类型错误。我也尝试过：

async componentMethod() {
  const DialogComponent = await import('./DialogueComponent');
    this.dialogue.open(DialogComponent, {
      // dialog component details
   });
});

编辑：这是我得到的错误：

错误TS2345：类型'typeof import（'/ path / to / component'）'的参数不能分配给'ComponentType <{}>类型的参数TemplateRef <{}>'。类型'typeof'/ path / to / component'不能分配给类型'TemplateRef <{}>'。类型'typeof'/ path / to / component'中缺少属性'elementRef'。

带Webpack代码拆分的Angular中的异步组件

0 个答案: