DEV Community

Cover image for Angular Development mocking External Calls
bob.ts
bob.ts

Posted on

4

Angular Development mocking External Calls

On a previous client project, I saw a use of local JSON for quick development that was horrible in that particular definition. I've refined the definition into something I can use more efficiently.

Angular Configuration

First, in the tsconfig.json file at the root of the project, I clean up the imports and allow JSON files to be resolved on import, as shown ...

{
  "compilerOptions": {
    ...
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true
   ...
  }
} 
Enter fullscreen mode Exit fullscreen mode

Assets Used

In the assets folder, I define the mock-data in the following path ...

assets/mock-data/api/
Enter fullscreen mode Exit fullscreen mode

For this article, assume there is a users.json file in the api folder.

Project Configuration

Within the project, I create a config.json file that can be imported.

{
  "features": {
    ...
    "useLocalJSON": false,
    ...
  }
} 
Enter fullscreen mode Exit fullscreen mode

This file is imported as such.

import config from '@core/config.json';
Enter fullscreen mode Exit fullscreen mode

By referencing config.features.useLocalJSON, we can quickly determine if we are using the local JSON files or calling out to the appropriate API endpoint with a single-line toggle.

Use of useLocalJSON

Here's some of the code in my api-service.

import hostnames from '@core/constants/hostnames.json';

...

getURL = (key: string): string => {
  if (this.useLocalJSON) {
    return hostnames.localJSON.BASE + hostnames.localJSON[key];
  } else {
    ...
  };

  getUsers = async (): Promise<Array<User>> => {
    const key: string = 'get-users';
    const url: string = this.getURL(key);
    try {
      const users: Array<User> = await this.http.get<Array<User>>(url).toPromise();
      return users;  
    } catch (error) {
      this.triggerErrorMessage(error);
      return Promise.resolve([]);
    }
  };
Enter fullscreen mode Exit fullscreen mode

As yo can see here, the getURL function assembles the URL based on the key from the hostnames.json which looks something like this.

{
  "localJSON": {
    "BASE": "assets/mock-data/api/",
    ...
    "get-users": "users.json",
  }
}
Enter fullscreen mode Exit fullscreen mode

Summary

So, with all this code we are able to serve the code and with a single feature flag, start using local responses rather than pure API calls. This allows me to work ahead of the backend team, or accommodate issues in the development environment, such as the API endpoints being down.

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay