Это позволяет вам делиться, повторно использовать и переименовывать
В этой статье я представлю решение для создания White Label Angular Apps с использованием модулей динамической маршрутизации и отложенной загрузки.
Что такое приложение White Label
Приложение с белой этикеткой - это приложение, созданное одной компанией и переименованное
в другие компании, чтобы продукт выглядел как их собственный.
Использование приложения White label сэкономит время и силы (деньги). В большинстве случаев изменения связаны с настройкой внешнего вида, функциональность предоставляется на основе существующего приложения.
Чего я хочу достичь
В этом примере я хочу разработать приложение White label на основе существующего приложения Angular.
Мои цели:
- У приложения White label есть собственная целевая страница с индивидуальным стилем.
- Он может иметь идентичные или подмножество существующих функций в исходном приложении.
- Его можно построить и развернуть как независимое приложение, распределенный пакет должен содержать только необходимый код.
- Максимизируйте совместное использование кода.
Угловое приложение
Для простоты пример Angular App содержит целевой модуль с домашним компонентом и два функциональных модуля.
| — app
| — Landing modules
|-- [+] home components
|-- default-landing-routing.module.ts
|-- default-landing.module.ts
| — feature1 modules
|-- [+] view1 components
|-- feature1-routing.module.ts
|-- feature1-landing.module.ts
| — feature2 modules
|-- [+] view2 components
|-- feature2-routing.module.ts
|-- feature2-landing.module.ts
| - app-routing.module.ts
| - app.module.ts
| - app-component.html
| - app.component.ts
Новое приложение White Label создано для компании «abc», оно имеет собственный модуль abc-landing с компонентом AbcHome.
Чтобы отличить исходное приложение от приложения с белой этикеткой, добавляется новый файл среды с новым атрибутом orgId.
// environment.ts
export const environment = { production: false, orgId: ‘default’};
// environment.abc.ts
export const environment = { production: false, orgId: 'abc'};
Чтобы Angular узнал о новой среде abc, нам нужно добавить следующую конфигурацию в Angular.json.
// angular.json
configurations": {
...,
"abc": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.abc.ts"
}
]
}
}
После завершения настройки мы можем создать приложение abc для новой среды с помощью следующей команды ng build.
//package.json ... "start-abc": "ng serve -c abc", ... "build-abc": "ng build -c abc",
А при сборке для производства папка dist будет содержать выходные данные сборки с конфигурацией abc.
Динамическая маршрутизация
Динамическая маршрутизация - ключ к этому решению.
Во-первых, мы добавляем новый модуль лендинга для компании abc.
| — abc Landing modules
|-- [+] abc home components
|-- abc-landing-routing.module.ts
|-- abc-landing.module.ts
Затем мы определяем маршрут в App.module.ts
const routes: Routes = [
{ path: '', data: {name: 'default', roles: ['all']}, redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', data: { name: 'home', roles: ['default']},loadChildren: () => import('./default-landing/default-landing.module').then(m => m.DefaultLandingModule) },
{ path: 'home', data: { name: 'home', roles: ['abc']},loadChildren: () => import('./abc-landing/abc-landing.module').then(m => m.AbcLandingModule) }
];
Здесь у нас есть два «домашних» маршрута: один для исходного приложения, другой для нового приложения abc White label. Как работают два «домашних» пути?
Мы используем токен APP_INITIALIZER, чтобы подключиться к процессу начальной загрузки angular.
providers: [{ provide: APP_INITIALIZER, useFactory: initApp, deps: [Injector], multi: true }]
В заводской функции «initApp» маршруты загружаются во время выполнения с помощью настройки среды «orgId» и атрибутов «role» в данных маршрутов, определенных ранее.
Модули с отложенной загрузкой
Возможно, вы уже заметили, что оба модуля по умолчанию и abc-landing являются модулями с отложенной загрузкой, поскольку используется синтаксис loadChildren, за которым следует функция, которая использует встроенный в браузер синтаксис import('...') для динамического импорта.
Преимущество заключается в том, что модули с отложенной загрузкой встраиваются в отдельные небольшие фрагменты, а не в один файл пакета. Специфичные для среды модули будут загружены в браузер только при переходе к маршрутизатору, хотя все они создаются во время компиляции. Например, когда мы запускаем конфигурацию abc, будет загружен только модуль abc-landing, а модуль по умолчанию никогда не будет вызван, так как он не входит в маршрут!
Совместное использование кода
Поскольку все посадочные модули «живут» вместе, они могут получить доступ / поделиться всем кодом по мере необходимости. В этом примере приложение White label использует модули feature1 и feature2 в своих дочерних маршрутах, а также приложение по умолчанию.
Поскольку приложение White label имеет другой «компонент входа»: AbcHomeComponent, внешний вид можно настроить по желанию. Он может иметь собственный компонент и стили верхнего / нижнего колонтитула. Мы также можем выбрать, какие функциональные модули использовать или не использовать в приложении White label.
Резюме
В этой статье на основе существующей базы кода создается полностью настраиваемое приложение White label. Мы просто добавляем новый посадочный модуль и несколько конфигураций. И исходное приложение, и новое приложение White label можно создать как независимое приложение, передав параметр -c и развернув на другом веб-хосте.
Я надеюсь, что эта статья будет полезна всем, кто намеревается создать приложение на Angular с несколькими интерфейсами. Исходный код доступен на GitHub.
Если вы еще не являетесь платным участником Medium, вы можете сделать это, перейдя по этой ссылке. Вы получите неограниченный полный доступ ко всем историям на Medium. Я буду получать часть ваших членских взносов в качестве реферала.
