Асинхронные компоненты в Angular W / Webpack Code-Splitting - PullRequest
Новая
       9

Асинхронные компоненты в Angular W / Webpack Code-Splitting

0 голосов
/ 27 июня 2018

Заранее спасибо всем, кто может помочь ответить на этот вопрос. В прошлом я использовал разделение кода Webpack в Vue, подобное тому, что мы видели в этом видео . Это очень просто, и вы просто используете метод импорта Webpack, выполнив что-то вроде: 

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 <{}> '. Свойство elementRef отсутствует в типе typeof /path/to/component'.

...