Generate API document with redoc to view a local API .json file using Angular Application

In this tutorial, I am going to create a sample Angular application to generate a API document using redoc to read a local JSON files.

Step 1: Create an Angular Project

Steps to create Angular Project from Scratch:

Step 1: Install Angular CLI:

Angular CLI (Command Line Interface) is a powerful tool for creating and managing Angular projects. You can install it globally using npm by running the following command in your terminal or command prompt:

npm install -g @angular/cli

Step 2: Create a New Angular Project:

Once Angular CLI is installed, you can use it to create a new Angular project. Navigate to the directory where you want to create your project and run the following command:

ng new angular-redoc --no-standalone

Step 3: Serve Your Angular Application:

After the project is created, navigate into the project directory then use an Angular CLI to serve your application locally by running:

ng serve

Folder Structure going to be like this:

Step 2: Add and Configure the Redoc in Angular Project

Step 1: Adding the Redoc :

Go to the root folder and execute the following npm command to add the Redoc into the project

npm i redoc

Once you execute the command you can see the redoc is added into the package.json file

Step 2: Add the Redoc Script:

Add the script element in index.html page

<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>

Note: If you would instead prefer to host the depdencies yourself,You can then reference the Redoc script with a node modules link as well :
<script src="node_modules/redoc/bundles/redoc.standalone.js"> </script>

Step 3: Configure the Redoc in the component:

Create a method to fetch the local json object and map it in the HTML file

Added it in your component:

initDocs(){
    const container = this.el.nativeElement.querySelector('#redoc');
Redoc.init('**LOCAL JSON FILE INFORMATION**', {
    scrollYOffset: 60,
    hideDownloadButton: true
  }, container);

  }

Note: Angular's ElementRef to access the native DOM element and the ngOnInit lifecycle hook to ensure that the component is ready before initializing Redoc.

Here is the complete code:

import { Component, ElementRef, OnInit } from '@angular/core';
declare var Redoc: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit  {
  title = 'angular-redoc';

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.initDocs();
  }



  initDocs(){
    const container = this.el.nativeElement.querySelector('#redoc');
    Redoc.init('**LOCAL JSON FILE INFORMATION**', {
    scrollYOffset: 60,
    hideDownloadButton: true
   }, container);
  }
}

Step 4: Read the JSON file from the local directory:

Create a Json file and place it in your assert folder.

You can find the sample Json file in the following location
http://petstore.swagger.io/v2/swagger.json

Note: It is not possible to call the local JSON file directly due to same-origin policy restrictions

Step 5: Call the local Json file from the component:

1. Using the import statement One way to read a JSON file from the assets folder in Angular is to use the import statement in your component.

Eg:

import * as data from '../assets/redoc-sample.json';

1. You need to add "resolveJsonModule": true in the compilerOptions of your tsconfig.json the file that is at the root of your Angular application.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "resolveJsonModule": true
  },
  "angularCompilerOptions": {
  }
}

1. Declare a variable and assign the data object.
   data: any = data;

2. Set the local file name

Replace the 'LOCAL JSON FILE INFORMATION' with the assigned variable (this.data) as seen below:

  initDocs(){
    const container = this.el.nativeElement.querySelector('#redoc');
    Redoc.init(this.data, {
    scrollYOffset: 60,
    hideDownloadButton: true
   }, container);
  }

1. Map the HTML file with the selector name:

     <div id="redoc"></div> 

Thats it !!

Your output will be something like this: