Angular 9 - Dynami c Модуль отложенной загрузки - Запрос зависимости является выражением - PullRequest
Новая
       11

Angular 9 - Dynami c Модуль отложенной загрузки - Запрос зависимости является выражением

0 голосов
/ 03 апреля 2020

Я бы использовал Angular Ленивые загрузочные функциональные модули для выполнения подключаемого интерфейса.
Так что концепция заключается в создании точек расширения в моем приложении, где я могу сделать что-то вроде этого: 

import('./customers/customers.component').then(lazyMod => {
   here use lazyMod.CustomersComponent to plug other component's template
})

Я разработал эту идею в простом Po C в stackblitz :
https://angular-9-dynamic-lazy-test.stackblitz.io

Case 1 - OK - Нажав кнопку 1 на Po C, он запускает следующий код и все в порядке: 

const { HelloComponent } = await import('./hello.component')

Case 2 - OK - Нажав кнопку 1 (бис) Po C, он запускает следующий код и все в порядке: 

const helloLazyModulePath = './hello.component';
const { HelloComponent } = await import(helloLazyModulePath );

Дело 3 - KO - Нажав кнопку2 на Po C, он запускает следующий код, и я получаю ошибку: 

const goodbyeLazyModulePath = './goodbye.component';
const { GoodbyeComponent } = await import(goodbyeLazyModulePath);

Ошибка : Uncaught (in promise): Error: Cannot find module.
A build предупреждение говорит: Critical dependency: the request of a dependency is an expression

Причина должна быть такова:
Согласно https://angular.io/guide/deployment#lazy - загрузка 

The CLI runs the Angular Ahead-of-Time Webpack Plugin which automatically recognizes
lazy-loaded NgModules and creates separate bundles for them

Это означает, что webpack angular tool на этапе сборки сканирует исходный код e, чтобы выяснить @import('path') и создать отдельный пакет для ленивого модуля.
Так что, если @import динамически используется @import(variable), у веб-пакета нет способа выяснить, какой функциональный модуль должен быть построен в отдельном комплекте.

Мне нужно использовать @import(variable), потому что я знаю, какой плагин-модуль импортировать только на этапе сборки, в зависимости от многих факторов, например, в какой среде я собираюсь развернуть.

Есть ли способ (обходной путь или компиляция) использовать @import(variable) без получения ошибки во время выполнения из-за отсутствия отдельного пакета?

РЕДАКТИРОВАТЬ: В дополнение к stackblitz , я вытащил тот же Po C в этом репозитории github

1 Ответ

1 голос
/ 03 апреля 2020

Как динамически c может быть путь? Я имею в виду, что вы должны знать все возможные пути. Так что вы можете просто сделать что-то вроде: 

let componentToUse: Component;

switch (dynamicArg) {
  case 'a': 
    componentToUse = (await import('path/to/a')).ComponentA;
    break;
  ...
}
...