Угловой веб-элемент нельзя использовать без странных обходных путей в PWA
Мне был предоставлен пользовательский веб-элемент, созданный с использованием Angular 6 для использования в проекте, над которым я работаю. Он поставляется с простой HTML-страницей, показывающей работающий элемент:
<custom-component></custom-component>
<script src="customComponents.js"></script>
Это работает нормально, однако, когда я пытаюсь использовать этот веб-элемент в моем собственном проекте PWA (построенном на освещенном элементе команд Polymer), я получаю сообщение об ошибке при попытке загрузить элемент (в моей среде разработчика - polymer serve):
Uncaught (in promise) SyntaxError: Unexpected eval or arguments in strict mode
Чтобы обойти это, я попытался загрузить компонент в мой index.html, чтобы он был доступен для любой страницы / элемента, который в этом нуждался - это было частично успешно, поскольку веб-элемент загружался без strict связанная с этим ошибка, НО, очевидно, она не привязывается к странице должным образом (понятия не имею, что это на самом деле означает, кроме того, что я получаю массу ошибок, связанных с событиями таймера и анимациями)
Обход, который мне дали, просто не подходит мне на 2018 год. Рекомендуется динамически загружать скрипт после рендеринга страницы.
_didRender() {
var script = document.createElement('script');
script.src = "customComponents.js";
document.getElementsByTagName('head')[0].appendChild(script);
Что работает, ошибок больше нет, а компонент функционирует как надо.
Я просто не думаю, что это правильный способ сделать что-то - мне придется в какой-то момент разгрузить его, так как я ожидаю, что это будет несколько экземпляров через PWA.
Итак, я открыт для идей и предложений о лучшем подходе к этому.
У меня есть доступ к репозиторию компонентов и (хотя я почти ничего не знаю об Angular), я изо всех сил пытаюсь понять, как заставить процесс сборки Angular выводить строгий код (без arguments а также evals) - есть указатели?