Within my main.ts file, I made a modification to the bootstrap function as follows:

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => {
    // The error is automatically logged by defaultErrorLogger, so no additional logging is needed here
    // console.log(err);
    // Display error to the user
    const errorMsgElement = document.querySelector('#errorMsgElement');
    let message = 'Application initialization failed';
    if (err) {
        if (err.message) {
            message = message + ': ' + err.message;
        } else {
            message = message + ': ' + err;
        }
    }
    errorMsgElement.textContent = message;
});

Any exceptions that occur are captured and the corresponding message is inserted into an HTML element. This element is specified within the app-root tag in the index.html file, for example:

<app-root><div id="errorMsgElement" style="padding: 20% 0; text-align: center;"></div> 
</app-root>

The content of this tag is replaced by Angular once the bootstrap process is successful.

I have encountered a similar issue and while there isn't a perfect solution, I managed to come up with a workaround. Here is how I approached it:

• To address the issue, I added an initialized variable to the config class:

  @Injectable()
  export class AppConfig {       
      public settings: AppSettings = null;
      public initialized = false;
  
      public load() {
          return new Promise((resolve, reject) => {
              this.http.get(environment.serviceUrl + 'config')
                  .catch((error: any) => {                      
                      this.initialized = false;
                      resolve(error);
                      return Observable.throw(error || 'Server error');
                  })
                  .subscribe((responseData: any) => {
                      this.settings = responseData;
                      this.initialized = true;
                      resolve(true);
                  });
          });
      }
  }
  

• In the app.component.html, I display either the app content or an error message based on the initialized variable:

  <div *ngIf="!appConfig.initialized">
      <b>Failed to load config!</b>
      <!-- or <app-config-error-page> -->
  </div>
  <div *ngIf="appConfig.initialized" #layoutContainer >
      <!-- the app content -->
  </div>
  

• I also implemented a global exception handler:

  @Injectable()
  export class GlobalErrorHandler implements ErrorHandler {
      constructor( private notificationService: NotificationService) { }
      handleError(error) {
          this.notificationService.error('Exception', `${error.message}`);
          return Observable.throw(error);
      }  
  }
  

Additionally, it is possible to store the specific error message or exception text in the config object and display it to users in the app.component or error page component as required.

My perspective offers a unique approach. I firmly believe that the Angular app's bootstrap should not proceed if initialization is unsuccessful, as it will lead to malfunctioning. Instead, it is better to inform the user with a message and halt the process.

Context: In my setup, the initialization involves making two sequential asynchronous requests:

1. First, an HTTP request is made to my "own" web server (where the Angular app is hosted) to acquire the hostname of the second web server that hosts the backend API.

2. Subsequently, a request is sent to the second web server to fetch additional configuration data.

If either of these requests fails, I believe it is essential to display a message and prevent Angular from continuing its bootstrap process.

Below is a simplified version of my code prior to incorporating the new exception handling technique:

const appInitializer = (
  localConfigurationService: LocalConfigurationService,
  remoteConfigurationService: RemoteConfigurationService
): () => Promise<void> => {

  return async () => {
    try {
      const apiHostName = await localConfigurationService.getApiHostName();
      await remoteConfigurationService.load(apiHostName);
    } catch (e) {
      console.error("Failed to initialize the Angular app!", e);
    }
};

export const appInitializerProvider = {
  provide: APP_INITIALIZER,
  useFactory: appInitializer,
  deps: [LocalConfigurationService, RemoteConfigurationService],
  multi: true
};

While this code logs an error to the console, it proceeds with the bootstrap process, which is not the desired behavior.

To address this issue and effectively halt the bootstrap process while displaying a message, I introduced the following three lines immediately after the console.error call:

      window.document.body.classList.add('failed');

      const forever = new Promise(() => { }); // will never resolve
      await forever;

The first line adds the class 'failed' to the <body> element of the document. The subsequent lines await a Promise that remains unresolved indefinitely, effectively pausing the Angular bootstrap process and preventing the app from loading.

The final modification is made in the index.html file, the HTML file loaded by the browser and housing the Angular app. Prior to my changes, it appeared as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8>
  <title>My App</title>
  <base href="/">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

The text "Loading..." within the <app-root> element indicates the ongoing initialization process, to be replaced by the app content upon completion of the bootstrap.

To ensure the display of an "oops!" message in case of initialization failure, I included a <style> block with CSS styles and additional content within the <app-root> element:

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

  <style type="text/css"><br><br>
    #failure-message {
      display: none;
    }

    body.failed #loading-message {
      display: none;
    }

    body.failed #failure-message {
      display: block;
    }
  </style><br>

</head><br>
<body><br>
<app-root><br>
  <h1 id="loading-message">Loading...</h1><br>
  <h1 id="failure-message">Oops! Something went wrong.</h1><br>
</app-root><br>
</body><br>
</html><br>

Now, by default, the "Loading..." message is displayed and replaced by app content upon successful initialization, while the "oops!" message appears if the <body> element includes the failed class, as set in our exception handling code.

One can certainly enhance the <h1> tag with more engaging content to convey the status effectively.

In summary, this approach ensures that the browser exhibits "loading..." initially, with the Angular app loading thereafter or displaying the "oops!" message in case of initialization issues.

Note that the URL remains unchanged; therefore, if the page is reloaded, the Angular app restarts the loading process from the beginning, reflecting the intended behavior.

Instead of throwing toGlobalErrorHandler, consider updating your initializer catch block

   this.http.get(environment.apiUrl + 'settings/config')
        .catch((error: any) => {
            window.location.href = '/path/another-page.html';
            return Observable.throw(error || 'An error occurred on the server')
        })
        .subscribe((responseData) => {
            this.configData = responseData;
            this.configData['endpoint'] = environment.apiUrl;
            resolve(true);
        });

Here are the steps I follow...

// app.module.ts

export function fetchAppConfiguration(http: HttpClient) {
  return async () => {
    try {
      const config = await http
          .get<IAppConfiguration>(`//${window.location.host}/appconfig.json`)
          .toPromise();
      // `appConfig` is a global object of type IAppConfiguration
      Object.assign(appConfig, config); 
      return config;
    }
    catch (err) {
      alert('An error occurred with the message: ' + err.message);
      throw err;
    }
  };
}

@NgModule({
  // ...
  providers: [
    // ...
    { 
      provide: APP_INITIALIZER, 
      useFactory: fetchAppConfiguration, 
      multi: true, 
      deps: [HttpClient]
    },
  ]
})
export class MainModule { ... }

I hope this approach proves useful :-)

To perform a redirect, first create an error.html file within the src folder. Once the file is created, redirect the user to that file in case of an error.

After setting up the error.html file, modify your angular.json file to include it in the assets section. This ensures that the angular application does not load and redirects instead.

 "assets": [
       {
        "glob": "**/*",
        "input": "src/assets",
        "output": "/assets"
       },
       {
         "glob": "error.html",
         "input": "src",
         "output": "/"
       }
    ],

Update your load function as follows:

public load() {
        return new Promise((resolve, reject) => {
            this.http.get(environment.serviceUrl + 'config/config')
                .catch((error: any) => {                  
                    window.location.href = '/error.html';
                    return Observable.throw(error || 'Server error');
                })
                .subscribe((responseData) => {
                    this.config = responseData;
                    this.config['service_endpoint'] = environment.serviceUrl;                  
                    resolve(true);
                });
        });
    }

One approach I took was to set up an interceptor along with an error service. This setup enables the interceptor to capture all HTTP errors that fall within specific status codes known to be errors.

Example of Interceptor

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Router } from '@angular/router';

import { ErrorService } from '@app/@pages/error/error.service';

import { catchError } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {

    constructor(
        private router: Router,
        private errorSvc: ErrorService
    ) { }

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        return next
            .handle(req)
            .pipe(
                catchError((error: any, resp: Observable<HttpEvent<any>>) => {
                    if (error instanceof HttpErrorResponse && (error.status === 0 || error.status > 400)) {
                        this.errorSvc.setHttpError(error);
                        this.router.navigate(['/error']);
                    }
                    return throwError(error);
                })
            );
    }
}

Example of Error Service

import { Injectable } from '@angular/core';

import { LocalStorageService } from 'angular-2-local-storage';

import { BehaviorSubject, Observable } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class ErrorService {

    private error$: BehaviorSubject<HttpErrorResponse> = new BehaviorSubject(this.localStorageSvc.get<HttpErrorResponse>('error'));

    constructor(private localStorageSvc: LocalStorageService) { }

    setHttpError(error: HttpErrorResponse): void {
        this.localStorageSvc.set('error', error);
        this.error$.next(error);
    }

    getHttpError(): Observable<HttpErrorResponse> {
        return this.error$.asObservable();
    }
}

To illustrate, the interceptor captures errors when loading configuration data via APP_INITIALIZER. Once an error is caught, the application will be directed to an error page. The error service leverages local storage and rxjs Behavior Subject to manage the error state. The error component will then utilize this service in its constructor and subscribe to display error details.