Я собираюсь разработать очень большое приложение с использованием Angular 7 Framework.
Я создал пустое угловое рабочее пространство, используя
ng new angular-app --create-application=false
И в этом рабочем пространстве у меня создано два угловых приложенияиспользуя следующие команды:
ng generate application app-one
ng generate application app-two
Внутри каждого из двух приложений я собираюсь иметь несколько компонентов, каждый из которых работает независимо друг от друга.
Я ищу способ Создайте отдельный файл сборки javascript для каждого компонента , чтобы уменьшить размер сборки.
И используйте каждый из отдельно созданных файлов js сборки, чтобы использовать каждый компонент в качестве веб-компонента.
Пожалуйста, прочитайте то, что я уже пытался получить лучшую идею.
Я попробовал следующие шаги:
Создайте репозиторий с префиксом custom для custom angularelements:
ng новое имя приложения --prefix custom
Добавить пакет угловых элементов:
ng add @ angular / elements
Создайте пользовательский компонентный элемент с инкапсуляцией как собственный / эмулированный / без необходимости:
ng g компонент my-component --inline-style --inline-template -v Native
Определить пользовательский элемент в app.modulte.ts
import { Injector} from '@angular/core';
import { createCustomElement } from '@angular/elements';
...
export class AppModule {
constructor(private injector : Injector){
const el = createCustomElement(MyComponent, {injector : this.injector});
customElements.define('my-component',el);
}
ngDoBootstrap(){ }
}
Установите пакет ngx-build-plus для сборки одного пакета (например, для угловых элементов):
npm i ngx-build-plus
Обновите раздел разработчика приложения в файле angular.json так, чтобы он указывал на ngx-build-plus:
"builder": "ngx-build-plus: build",
Добавить скрипт в package.json для запуска builder:
"build: ngx": "ng build --prod --output-hashing none --single-bundle true"
При необходимости объедините scripts.js и main.js в созданной папке dist, создав файл js "concat_ngx.js":
const fs = require('fs-extra');
const concat = require('concat');
(async function build() {
const files = [
'./dist/<your_project>/scripts.js',
'./dist/<your_project>/main.js',
]
await fs.ensureDir('elements_ngx')
await concat(files, 'elements_ngx/combined-script.js');
})()
Запуск файла для получения одного файла js:
node concat_ngx.js
Использование файла js в любом проекте Angular / Other для использования пользовательского компонентасоздал.
Но проблема здесь в том, что мне приходится каждый раз менять компонент начальной загрузки в app-module.ts
Мне нужен был автоматический способ изменения начальной загрузки вapp-module.ts во время выполнения.
Но проблема здесь в том, что мне приходится каждый раз менять загрузчик компонента в app-module.ts
Мне нужен был автоматический способ изменить загрузку вapp-module.ts во время выполнения.