How to set homepage route URL in angular routing?

In this article, we learn how to setting up homepage route URL in angular routings. I will show you how, just follow the steps clearly.

For more updates please do Subscribe via Email:

Table Of Contents

How to set homepage route URL in angular routing?
Implementation
Related Topics

How to set homepage route URL in angular routing?

First thing to do to setting up homepage route URL is to create a page component for the homepage. In the following approach, we will create a simple angular component called HomepageComponent.

Creating Component: Run the below command to create Homepage component.

ng g c homepage

ng generate component homepage

Noted: this will be continue for angular export excel file article.

This will the view of your CLI after running the command.

Project Structure: It will look like this.

Implementation

Add the below code inside HTML template of this component to display a simple 404 error message.

<div class="container">
    <img src="https://i.kym-cdn.com/photos/images/original/001/176/525/7dd.gif">
</div>

Then inside the routing file, we have to provide this component route and make this available for every 404 requests. So, inside the app-routing.module.ts file, we have to create a new route for this PagenotfoundComponent.

import { HomepageComponent } from './homepage/homepage.component';
import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';
import { ExportExcelFileCustomComponent } from './export-excel-file-custom/export-excel-file-custom.component';
import { ExportCustomExcelFileComponent } from './export-custom-excel-file/export-custom-excel-file.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExportExcelFileComponent } from './export-excel-file/export-excel-file.component';

const routes: Routes = [
  { path: 'exportExcelFile' , component:ExportExcelFileComponent},
  { path: 'exportCustomExcelFile' , component:ExportCustomExcelFileComponent},
  { path: 'ExportExcelFileCustom' , component:ExportExcelFileCustomComponent},
  
   // homepage route
  { path: '' , component:HomepageComponent},

      //Wild Card Route for 404 request
  { path: '**' , component:PagenotfoundComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

 }

Here is the for HomepageComponent is provided inside the route array. So now when someone tries to send a request to page that is not available in route array will be automatically redirected to Homepage Component page.

Steps to run the application:

Run the following command to start the application:

ng serve

Now open the browser and go to http://localhost:4200;

Happy Learning..

GitHub Branch:https://github.com/JaveTLupango/exportExcelFile/tree/HomepageRouteURL

GitHub : https://github.com/JaveTLupango

Thank you for visiting my blog site. Hoping you learn more here. please feel free to comment and suggest if there is need to enhance and update. thank you.