404 Error Page displaying automatically when the application is load for the First Time in Angular 14

Question

I have created a small application in Angular. I'm trying to make 404 Error Page in that application. If user put any wrong URL then this Error page will be Display automatically.

For that I have done - I have created a Separate Component name as "NotFoundComponent".

NotFoundComponent.html

<h1>Page Not Found !! </h1>
<a routerLink="/">Go back to Home Page</a>

app-routing.module.ts

const routes: Routes = [
  { path: 'about-us', component: AboutUsComponent },
  { path: 'how-it-works', component: HowItWorksComponent },
  { path: '**', component: NotFoundComponent },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  //providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

})
export class AppRoutingModule { }

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    AboutUsComponent,
    HowItWorksComponent
  ],

  imports: [
    BrowserModule,
    AuthModule,
    UserModule,
    PublicModule,
    SharedModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

If I'm putting any wrong URL than it is working as fine, It is showing 404 Error Page. i.e. NotFoundComponent.html.

But my problem is that when my application get load for the first time, it automatically displaying 404 Error Page or NotFoundComponent.html.

Rather than this, it is working fine, I have tried solution of HashLocationStrategy in app-routing.module.ts and but it won't work for me.

From my Point of view, I have set the correct order for Module in app.module.ts file and routing for app-routing.module.ts file.

Any help will be appreciated....Thank u!!

When you load the page for the first time, a component must be assigned to the route, or you must set up a redirect to another route (e.g. about-us) like this ` { path: '', redirectTo: 'about-us', pathMatch: 'full' }` Otherwise, the path `http://localhost:4200` will not match any route configuration except `path: '**'`. For more information, see the documentation [here](https://angular.io/guide/router#setting-up-redirects). — riorudo, Nov 05 '22 at 08:53

score 1 · Accepted Answer · answered Nov 05 '22 at 15:03

1

The reason is that your root path is not configured in your routes config. This way the only route matching your root path is the "wildcard" route showing the NotFoundComponent.

In order to resolve the issue, you should define the root path and assign either a component to be rendered to it or assign a redirect path:

const routes: Routes = [
  // either define a component to be rendered: 
  // { path: '', pathMatch: 'full', component: MyHomeComponent },
  //
  // or redirect to a different route: 
  // { path: '', pathMatch: 'full', redirectTo: '/about-us' },
  { path: 'about-us', component: AboutUsComponent },
  { path: 'how-it-works', component: HowItWorksComponent },
  { path: '**', component: NotFoundComponent },
];

answered Nov 05 '22 at 15:03

Fabian Strathaus

3,192
1
4
26

Hi @fabian, your answer is right and thank you, and I have added this line { path: '', pathMatch: 'full', redirectTo: '' }, in app-routing.module.ts file and it is basically redirect to home page by default and it is working fine and it is right way to handle the code, can you suggest me ?? – THE LIFE-TIME LEARNER Nov 06 '22 at 10:21
1

Well, if you redirect to the same page, it shouldn’t be working at all, since you would run into a loop. You should either set the component or redirect to a different route. – Fabian Strathaus Nov 06 '22 at 17:21

404 Error Page displaying automatically when the application is load for the First Time in Angular 14

1 Answers1