Угловые элементы: включают в себя один угловой элемент - PullRequest
0 голосов
/ 04 февраля 2019

Угловые элементы - это угловые компоненты, упакованные как пользовательские элементы .Каждый Угловой Элемент отправляет угловое ядро.Если в стандартную html-страницу я включаю 5 компонентов Angular Elements, эта страница загружает 5-кратное угловое ядро.

Существует способ включить один раз, когда угловое ядро ​​загружает только код компонентов?

Ответы [ 2 ]

0 голосов
/ 14 августа 2019

Вы можете использовать ngx-build-plus и сделать их внешними.Прочитайте это: https://www.npmjs.com/package/ngx-build-plus

Вот окончательный HTML-код будет выглядеть следующим образом:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ElementsLoading</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

<!-- Consider putting the following UMD (!) bundles -->
<!-- into a big one -->

<!-- core-js for legacy browsers -->
<script src="./assets/core-js/core.js"></script>

<!-- Zone.js -->
<!-- 
    Consider excluding zone.js when creating
    custom Elements by using the noop zone.
-->
<script src="./assets/zone.js/zone.js"></script>


<!-- Polyfills for Browsers supporting 
        Custom Elements. Needed b/c we downlevel
        to ES5. See: @webcomponents/custom-elements
-->
<script src="./assets/custom-elements/src/native-shim.js"></script>

<!-- Polyfills for Browsers not supporting
        Custom Elements. See: @webcomponents/custom-elements
-->
<script src="./assets/custom-elements/custom-elements.min.js"></script>


<!-- Rx -->
<script src="./assets/rxjs/rxjs.umd.js"></script>

<!-- Angular Packages -->
<script src="./assets/core/bundles/core.umd.js"></script>
<script src="./assets/common/bundles/common.umd.js"></script>
<script src="./assets/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="./assets/elements/bundles/elements.umd.js"></script>

<!-- Calling Custom Element -->
<custom-element></custom-element>

</body>
</html>

Я могу сделать это и могу выводить угловые модули.Но я хотел знать, как я могу вывести свои собственные библиотеки, созданные в angular?Одна вещь, которую я вижу, это то, что Angular создает пакеты UMD, где ng.core, ng.common определены как глобальные переменные (чтобы я мог получить к ним доступ через объект окна).Я попытался использовать rollupjs для создания пакетов umd, но он создает любую глобальную переменную, как это делалось для угловых компонентов.Я застрял здесь и ищу идеи.Спасибо!

0 голосов
/ 04 февраля 2019

Это проблема, которая должна быть устранена после окончательного выпуска средства визуализации ivy (https://is -angular-ivy-ready.firebaseapp.com / # / status - статус не изменилсяв последние несколько месяцев ...), поскольку предполагается, что он удаляет любой неиспользуемый код и таким образом уменьшает размер каждого элемента.

Тем временем вы можете использовать https://github.com/manfredsteyer/ngx-build-plus#advanced-example-externals-and-angular-elements для исключения базовых пакетов изВаши пользовательские элементы создаются и предоставляются в базовом приложении, например, angular core, rxjs и т. д. загружаются только один раз.

РЕДАКТИРОВАТЬ: убедитесь, что вы загружаете свои пользовательские элементы после основного приложения (используя defer илидинамически загружать их), чтобы убедиться, что загружены необходимые базовые сценарии.Вам не нужно добавлять библиотеки umd, как указано в файле readme проекта, просто убедитесь, что в вашем базовом приложении есть все эти скрипты (добавив их в angular.json, если он еще не импортирован)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...