Santhosh R's blog

List all Angular Routes: A Step-by-Step Guide

Santhosh R's photo
Santhosh R
·

2 min read

Table of contents

Introduction: In this blog post, we will explore how to extract and list all routes declared in an Angular app and export them to an Excel file. We will be using two libraries, guess-parser and xlsx-populate, to achieve this functionality. Let's dive into the code and understand each line step by step.

Step 1: Installation

To get started, make sure you have Node.js installed on your machine. If not, download and install it from the official Node.js website.

Step 2: Setting up the Project

  1. Create a new directory for your project and navigate to it using the command line.

  2. Initialize a new Node.js project by running the following command:

npm init -y

Step 3: Installing Dependencies

  1. Install the guess-parser and xlsx-populate libraries by running the following command:
npm install guess-parser xlsx-populate

Step 4: Code Implementation

  1. Create a new JavaScript file, e.g., extract_routes.js, and open it in your preferred code editor.

  2. Copy and paste the following code into extract_routes.js:

const { parseAngularRoutes } = require('guess-parser');
const XlsxPopulate = require('xlsx-populate');

async function generateExcel(data, appName) {
  const wb = await XlsxPopulate.fromBlankAsync();
  const ws = wb.sheet(0); // Get the first (default) sheet

  // Rename the default sheet
  ws.name(appName);

  // Set column headers
  const headers = Object.keys(data[0]);
  headers.forEach((header, index) => {
    ws.cell(1, index + 1).value(header);
    ws.cell(1, index + 1).style({ bold: true });
  });

  // Set data rows
  data.forEach((row, rowIndex) => {
    Object.values(row).forEach((value, colIndex) => {
      ws.cell(rowIndex + 2, colIndex + 1).value(value);
    });
  });

  // Save the Excel file
  const filename = `${appName}_extracted_routes.xlsx`;
  await wb.toFileAsync(filename);
  console.log(`Excel file "${filename}" generated.`);
}

// Extracting angular app path
// from /Users/JoyBoy/angular-app/src/app.module.ts
// to angular-app/src/app.module.ts
const extractAppPath = (app_name, path) => {
  return path.includes(app_name) ? path.substring(path.indexOf(app_name)) : '';
};

const extractRoutesAndGenerateExcel = async (appName, appPath) => {
  let routes = parseAngularRoutes(`${appPath}/ts.config.app.json`);
  routes = routes.map(
    ({ path, modulePath, parentModulePath, redirectTo = '' }) => ({
      path,
      redirectTo: redirectTo,
      modulePath: extractAppPath(appName, modulePath),
      parentModulePath: extractAppPath(appName, parentModulePath),
    })
  );

  await generateExcel(routes, appName);
};

extractRoutesAndGenerateExcel('angular-app', 'path/to/your/angular-app');

Step 5: Executing the Code

  1. Save the changes in extract_routes.js.

  2. Open the command line and navigate to the project directory.

  3. Run the following command to execute the code:

node extract_routes.js

Step 6: Viewing the Sample Output

Conclusion: Congratulations! You have successfully extracted or listed all angular routes and generated an Excel file from it using the guess-parser and xlsx-populate libraries. You can now integrate this functionality into your Angular projects to export route information to Excel. Feel free to customize the code according to your specific requirements.

I hope this tutorial was helpful. If you have any further questions, please let me know!

AngularScript