Как добавить новый компонент, когда приложение Angular не может загрузиться

Question

У меня есть вопрос о моем приложении Angular, у меня есть приложение, которое получает свои начальные данные конфигурации из API и может загрузить приложение с помощью этих настроек. Вот ApiConfigService:

export class ApiConfigService {
    public initialized: Promise<any>;

    constructor(
        private readonly windowService: WindowService
    ) {
        this.initialized = window.configReady;
    }
}

Вот фабрика конфигурации Api:

import { ApiConfigService } from '../services/api-config.service';

export function fetchApiConfigFactory(
    apiConfigService: ApiConfigService
) {
    return () => apiConfigService.initialized;
}

и в моем модуле приложения это то, что у меня есть в моем провайдере:

{ provide: APP_INITIALIZER, useFactory: fetchApiConfigFactory, multi: true, deps: [ApiConfigService] },

Таким образом, инициализация приложения зависит от обещания, полученного из window.ConfigReady. Если window.ConfigReady разрешается и имеет правильные данные, приложение будет инициализировано, и все будет хорошо.

Теперь я собираюсь добавить новую функциональность, в некоторых случаях конфигурация отсутствует, и мне нужно реализовать страницу входа и показать ее пользователю, а затем после входа в систему будет выбрана конфигурация и приложение будет инициализировано. Мне интересно, как я могу реализовать знак в соответствии с этой структурой? В основном мне нужно как-то добавить в модуль приложения, чтобы при отсутствии window.ConfigReady использовать другой компонент signInComponent показать это пользователю. Любая помощь и гильдия о том, как это сделать в Angular, будет по достоинству оценена! Спасибо

Answer 1

Прямо сейчас вы внедрили сервис, используя APP_INITIALIZER, в модуль приложения, что означает, что он будет работать перед приложением независимо от какого-либо компонента в вашем приложении. В вашем случае я бы предложил использовать подход маршрутизации, для каждого URL-адреса маршрутизации вы можете создать распознаватель маршрутов, который будет выполняться перед загрузкой компонента, указанного в маршруте.

export const appRoutes: Routes = [
    { path: '/home', component: HomeComponent,resolve:{config:ConfigResolver} },
    { path: '/SignIn', component: SignInComponent },

    {path:'404',component:Error404Component}

];

Также в вашем appConfigService проверьте, загружены ли уже данные, потому что служба будет выполняться при активации каждого маршрута, поэтому внутри службы вам не нужно снова извлекать данные из какого-либо API.

https://angular.io/api/router/Resolve

https://alligator.io/angular/route-resolvers/

Надеюсь это поможет.