Angular Elements 3. Продвинутый уровень 2

Второе видео, "продвинутого" использования Angular Elements.
В этом видео расскажу:
Разделение сборки на ядро и прикладную часть
Разрешение конфликта с RequireJS
Добавление в ядро общих библиотек

// Добавляем расширение позволяющее делать раздельные сборки
ng add ngx-build-plus

// Генерируем полифил для web components
ng g ngx-build-plus:wc-polyfill

// Генерируем разделение на ядро и "остальное"
// В файле angular.json появляется список js файлов которые будут
// включаться в scripts.js и webpack.externals.js, кроме того
// автоматически создастся скрипт на сборку в package.json
ng g ngx-build-plus:externals

// В angular.json меняем максимальный размер бандла
"maximumError": "3mb"

// Установи ещё одно дополнение
npm i @webcomponents/custom-elements --save

// в вайле angular.json перед всеми скриптами добавим
npm i @webcomponents/custom-elements --save

// а в polyfills.ts добавим
import '@webcomponents/custom-elements/custom-elements.min'

// Добавим скрип переименование в результирующем scripts.js
// если у вас не стояло до этого ts-node, то установите
// npm i -g ts-node
"replace": "ts-node ./scripts/replace.define.ts"

// Я для удобства отладки добавил копирование js файлов
// в папку где идёт подключение web components
// если у вас не стояло copyfiles, то установите
// npm i -g copyfiles
"copy": "copyfiles -f dist/angular-elements/*.js {ТУТ ПУТЬ КУДА ВАМ НУЖНО}"

// поправим скрип сборки в package.json
"build:externals": "ng build --extra-webpack-config webpack.externals.js --output-hashing=none --single-bundle && npm run replace && npm run copy"

// Для того что бы добавить в scripts.js общие библиотеки,
// например material, в angular.json в scripts добавьте (тут не весь material!!!)
"node_modules/@angular/cdk/bundles/cdk.umd.js",
"node_modules/@angular/cdk/bundles/cdk-platform.umd.js",
"node_modules/@angular/cdk/bundles/cdk-bidi.umd.js",
"node_modules/@angular/cdk/bundles/cdk-observers.umd.js",
"node_modules/@angular/cdk/bundles/cdk-collections.umd.js",
"node_modules/@angular/cdk/bundles/cdk-scrolling.umd.js",
"node_modules/@angular/cdk/bundles/cdk-a11y.umd.js",
"node_modules/@angular/cdk/bundles/cdk-portal.umd.js",
"node_modules/@angular/cdk/bundles/cdk-drag-drop.umd.js",
"node_modules/@angular/cdk/bundles/cdk-overlay.umd.js",
"node_modules/@angular/cdk/bundles/cdk-text-field.umd.js",
"node_modules/@angular/animations/bundles/animations.umd.js",
"node_modules/@angular/forms/bundles/forms.umd.js",
"node_modules/@angular/material/bundles/material-core.umd.js",
"node_modules/@angular/material/bundles/material-form-field.umd.js",
"node_modules/@angular/material/bundles/material-input.umd.js",
"node_modules/@angular/material/bundles/material-button.umd.js",
"node_modules/@angular/material/bundles/material-datepicker.umd.js",
"node_modules/@angular/material/bundles/material-tooltip.umd.js",
"node_modules/@angular/material/bundles/material-select.umd.js"

// а в webpack.externals.js нужно добавить
"@angular/cdk": "ng.cdk",
"@angular/cdk-bidi": "ng.cdk.bidi",
"@angular/cdk-platform": "ng.cdk.platform",
"@angular/cdk-a11y": "ng.cdk.a11y",
"@angular/cdk-observers": "ng.cdk.observers",
"@angular/cdk-collections": "ng.cdk.collections",
"@angular/cdk-scrolling": "ng.cdk.scrolling",
"@angular/cdk-drag-drop": "ng.cdk.drag.drop",
"@angular/cdk-overlay": "ng.cdk.overlay",
"@angular/cdk-portal": "ng.cdk.portal",
"@angular/cdk-text-field": "ng.cdk.textField",
"@angular/animations": "ng.animations",
"@angular/forms": "ng.forms",
"@angular/material-core": "ng.material.core",
"@angular/material-button": "ng.material.input",
"@angular/material-button": "ng.material.button",
"@angular/material-datepicker": "ng.material.datepicker",
"@angular/material-tooltip": "ng.material.tooltip",
"@angular/material-select": "ng.material.select",
"@angular/material-tooltip": "ng.material.formField"

// В результате подключение будет выглядеть примерно так
requirejs.config({ map: { '*': { css: 'css.min' } } });
requirejs(
[
'polyfills.js',
'scripts.js',
'polyfill-webcomp.js',
'css!styles.css'
],
function () {
requirejs(['main.js'], function () {
const el = document.createElement("sat-pg-root");
el.pp = { f: function (index) { console.log(index); } };
document.body.appendChild(el);
});
}
);

Видео Angular Elements 3. Продвинутый уровень 2 канала Архитектор ПО. Александр Желнин