Search code examples
angularangular8angular-routingangular-router

Need to add a Independent 404 page in Angular without Header or Footer

I have created a Angular application and for that, If the user points to an unknown URL, it should step into a 404 page showing a friendly message to redirect to Home. Now I created a component showing this 404. Now the problem is , it shows with header and footer. In this case I don't want the header & footer to be displayed The page right now I need to display the 404 without the header and footer. Is there any simple way to achieve it. Thanks in Advance.

Index.html

<body>
  <app-root></app-root>
</body>

app.component.html

<div *ngIf="!webLoading">
    <app-header></app-header>
    <div class="minhgt-router-outlet">
        <router-outlet></router-outlet>
    </div>
    <app-footer></app-footer>
</div>
<div class='modal d-flex carousel' *ngIf="webLoading">
    <p-progressSpinner [style]="{width: '50px', height: '50px'}" 
    strokeWidth="4" fill="#ffffff" animationDuration=".8s"></p-progressSpinner>
</div>

not-found.component.html

<div class="notfound">
        <div class="notfound-404">
            <h3>Oops! Page not found</h3>
            <h1>
                <span>4</span>
                <span>0</span>
                <span>4</span>
            </h1>
        </div>
        <h2>we are sorry, but the page you requested was not found</h2>
</div>

app-routing.module.ts

const routes: Routes = [
  {
    path: "",
    component: BodyContentComponent
  },
{ 
    path: "**", 
    component: NotFoundComponent
   }
];
Solution

  • In your AppComponent, you can subscribe to router events and check for the current URL, and add a condition based on that in template file.

    url: string;

ngOnInit(): void {
  this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd),
    map((e: NavigationEnd) => this.url = e.urlAfterRedirects)
  ).subscribe();
}

    And then, in your template,

    <ng-container *ngIf="url !== '/404url'"> <app-header></app-header></ng-container>

    Also, for this to work, you should have a specific route for 404 page, and redirect all wild card routes to that page.

    {
  path: '**',
  redirectTo: '404PageRoute',
  pathMatch: 'full'
},  {
  path: '404PageRoute',
  component: NotFountcomponent
}