Structure Error Handling, Multi-Language Support, & Structure Utility/Helper Files

[mufniarz]

In Angular version 13 and above, you can create standalone components that do not need to be declared in an @NgModule. Let's go through each of the steps as we will consider Angular standalone components and services.

Step 1: Structure Error Handling

1. Create a custom ErrorHandler Service: Generate a service, say custom-error-handler.service.ts under src/app/core/services folder. This service should extend the ErrorHandler class of Angular and override its handleError method.

import { ErrorHandler, Injectable, NgZone } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CustomErrorHandler extends ErrorHandler {

  constructor(private ngZone: NgZone) { 
    super();
  }

  handleError(error: any): void {
    this.ngZone.run(() => {
      // custom error handling logic goes here
      let errorTitle = '';
      let errorMessage = '';

      switch (error.code) {
        case "auth/email-already-in-use":
          errorTitle = "Email already in use";
          errorMessage = "The email address is already in use by another account.";
          break;
        case "auth/invalid-email":
          errorTitle = "Invalid email";
          errorMessage = "The email address you have entered is not valid.";
          break;
        case "auth/operation-not-allowed":
          errorTitle = "Operation not allowed";
          errorMessage = "The type of authentication you're trying to use has not been enabled for this Firebase project.";
          break;
        case "auth/weak-password":
          errorTitle = "Weak password";
          errorMessage = "The password you have entered is too weak. Please choose a stronger password.";
          break;
        default:
          console.warn("An unknown error occurred: ", error.message);
          // Handle other errors
          break;
      }

      // Display an alert with the error message
      if (errorTitle && errorMessage) {
        alert(`${errorTitle}: ${errorMessage}`);
      }
    });
  }
}

2. Register the Custom ErrorHandler: Now, in your main.ts file or app's bootstrap file, you can provide your custom error handler as follows:

bootstrapApplication(AppComponent, {
  providers: [
    {provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
    importProvidersFrom(IonicModule.forRoot({})),
    provideRouter(routes),
    AuthService,
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ],
});

3. Call the Custom ErrorHandler: Now, in your user-login.page.ts file, you can call your custom error handler as follows:

import { AuthService } from './auth.service'; // Assuming AuthService is the service where the auth actions are taken.
import { CustomErrorHandler } from './custom-error-handler.service';

// Instanciate the services.
let authService = new AuthService();
let customErrorHandler = new CustomErrorHandler();

// An async function to login, for instance
async function loginUser(email: string, password: string) {
  try {
    await authService.login(email, password); // Call to your auth service login method.
  } catch (error) {
    customErrorHandler.handleError(error); // Use your custom error handler.
  }
}

// Then call loginUser with the user data.
loginUser('test@example.com', 'password123');

Step 2: Implement Multi-Language Support

1. Install ngx-translate: Install the ngx-translate library and the http loader via npm.

npm install @ngx-translate/core @ngx-translate/http-loader --save

2. Create Language Files: Create different JSON files for each language under src/assets/i18n directory. These files will contain key-value pairs for each text used in your application. For example:

// en.json
{
  "hello": "Hello"
}

// es.json
{
  "hello": "Hola"
}

3. Configure TranslateModule in your Bootstrap Component: Configure the TranslateModule in your app.component.ts file or any other bootstrap component:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [TranslateService]
})
export class AppComponent {
  title = 'app';

  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }
}

4. Usage: Use the TranslateService to translate text:

<div>{{ 'hello' | translate }}</div>

Step 3: Structure Utility/Helper Files

1. Create a utils folder: Under your src/app/core/ directory, create a new folder named utils.

2. Create helper files: Now, create separate files for different types of helpers. For example, date-utils.ts for date-related functions, string-utils.ts for string operations, etc.

3. Usage: You can use these helper functions in your components or services like this:

import { formatDate } from 'src/app/core/utils/date-utils';

// use formatDate function

By structuring your application in this way, you can ensure that your Angular application is well-organized, scalable and maintainable. Standalone components and services make your application more modular, easy to understand and test.

---

Examples of common utility functions we might need when working with Firebase Firestore. These are simple functions that handle tasks like data formatting or validation.

1. Function to Convert Timestamp to Date:

Firebase Firestore stores dates as timestamp objects. You may need a helper function to convert this timestamp into a more human-readable date format.

function convertTimestampToDate(timestamp: firebase.firestore.Timestamp): Date {
  const milliseconds: number = timestamp.seconds * 1000 + timestamp.nanoseconds / 1000000;
  const date: Date = new Date(milliseconds);
  return date;
}

2. Function to Sanitize User Input:

This is essential to prevent any form of injection attacks, especially if you are using user input to construct queries.

function sanitizeUserInput(input: string): string {
  return input.replace(/[^\w\s]/gi, '');
}

3. Function to Validate Email:

If you are not using Firebase Auth's email/password login method, which automatically validates emails, you might want a utility function to validate emails.

function validateEmail(email: string): boolean {
  var re: RegExp = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

4. Function to Prepare Data for Insert:

Before you insert data into Firestore, you may want to ensure that it is in the correct format. This might involve setting default values, ensuring mandatory fields are present, or converting dates to timestamps.

interface Data {
  [key: string]: any;
  email?: string;
  createdAt?: firebase.firestore.FieldValue;
  updatedAt?: firebase.firestore.FieldValue;
}

function prepareDataForInsert(data: Data): Data {
  // set default values
  data = {
    ...data,
    createdAt: firebase.firestore.FieldValue.serverTimestamp(), // current timestamp
    updatedAt: firebase.firestore.FieldValue.serverTimestamp(), // current timestamp
  };

  // check for mandatory fields
  if (!data.email) throw new Error('Email is mandatory');

  // sanitize user input
  data.email = sanitizeUserInput(data.email);

  // validate email
  if (!validateEmail(data.email)) throw new Error('Invalid email');

  return data;
}

Please note that these are simple examples, and may need to be adapted to your specific needs. You might also want to handle errors more gracefully, such as by showing user-friendly error messages.