У меня есть гибридное приложение Ioni c 5 (где Angular 8 выполняет тяжелую работу), и я хотел бы динамически импортировать веб-компоненты, которые я ранее создал с помощью @ angular / elements.
Идея состоит в том, чтобы использовать вариант импорта, который работает как функция, как описано на mdn , например:
import('/modules/my-module.js').then(module => {...})
Я создал веб-компоненты, и они работают нормально, если Я импортирую их статически, например:
import '../webcomponents/item.js';
Однако динамически все ставки отключены. Сначала я подумал, что webpack разрушает пути, но ничего сложнее. Посмотрите, что работает:
import('../webcomponents/item.js').then(mm => {...})
работает как шарм.
Но
const path = '../webcomponents/item.js';
import(path).then(mm => {...})
получает следующую реакцию: Uncaught (in promise): Error: Cannot find module '../webcomponents/item.js'
и немного ниже
Warnings while compiling
...
Critical dependency: the request of a dependency is an expression
Есть идеи, что здесь может сработать? Разница только в том, чтобы использовать путь напрямую в виде строки внутри import () или сначала поместить его в переменную. Что это за вуду? Webpack все еще мешает? Я сократил все приложение до этого кода, так что здесь больше ничего не может вызвать сбой:
import { Component } from '@angular/core';
import('../webcomponents/item.js').then(mm => {}); // works
const path = '../webcomponents/item.js';
import(path).then(mm => {}); // doesn't
@Component({
selector: 'app-root',
template: ``,
styles: [],
})
export class AppComponent {}