Angular full screen 404 page with router-outlet

user_4043239 0
Viewed 227

So I'd like to create a full screen 404 page not related to the main content's router-outlet.

Because right now when I visit a not-existing page the 404 page content is displayed inside the router outlet, with the header, navbar etc still in place.

However I'd like to have it like the WHOLE SCREEN in full screen 404 page. Something like this, just without the nav bar on top: https://www.blizzard.com/en-us/asdasdasd

This is what I have so far:

app.component.html

<div class="background-placeholder">
  <app-navbar></app-navbar>
  <!--<app-header></app-header>-->
  <router-outlet></router-outlet>
  <app-footer></app-footer>
</div>

app-routing.module.ts

{
    path: '**',
    pathMatch: 'full',
    component: NotFoundComponent
}

NotFoundComponent:

<body>
  <p>404</p>
</body>

Thanks in advance.

angular
3 Answers

There are multiple ways to accomplish what you want.

1. Overlay (quick&dirty):

What you did looks quite good. Just don´t try to replace everything - just lay over.

In not-found.component.scss

:host {
  position: fixed;
  width: 100%;
  height: 100%;
}

And do within NotFoundComponent whatever you like. This is defintely not the cleanest solution (just think about screen readers...), but it is quite simple and gets the job done.

2. Service to hide NavBar, Header and Footer (clean, little more complex)

Create an AppService that can control basic app features like showing and hiding top-level components.

Do something like that in app.service.ts:

@Injectable({
  providedIn: 'root'
})
export class AppService {

  showNavigation$: BehaviorSubject<boolean>;
  showHeader$: BehaviorSubject<boolean>;
  showFooter$: BehaviorSubject<boolean>;

  constructor() { 
    this.showNavigation$ = new BehaviorSubject<boolean>(true);
    this.showHeader$ = new BehaviorSubject<boolean>(true);
    this.showFooter$ = new BehaviorSubject<boolean>(true);
  }
}

Inject AppService to your AppComponent and bind the components to the fields. app.component.html:

<div class="background-placeholder">
  <app-navbar *ngIf="appService.showNavigation$ | async"></app-navbar>
  <!--<app-header *ngIf="appService.showHeader$ | async"></app-header>-->
  <router-outlet></router-outlet>
  <app-footer *ngIf="appService.showFooter$ | async"></app-footer>
</div>

Inject the service to NotFoundComponent and set the "show" properties to false.

appService.showNavigation.next(false);
appService.showHeader.next(false);
appService.showFooter.next(false);

That is a clean and elegant way to control app-wide features from child components.

3. More hierarchy in navigation (clean, but slightly messes up the url)

Empty your AppComponent so that it contains only the RouterOutlet.

app.component.html:

<div class="background-placeholder">
  <router-outlet></router-outlet>
</div>

Now add something like a master-page.

master.component.ts:

<app-navbar></app-navbar>
<!--<app-header></app-header>-->
<router-outlet></router-outlet>
<app-footer></app-footer>

At last define the routes with a little more hierarchy like this:

app-routing.module.ts:

{
  path: 'side',
  component: MasterComponent,
  children: [
    {...your actual routes here...},
    {
      path: '*',
      redirectTo: '/not-found'
  ]
},
{
  path: 'not-found',
  component: NotFoundComponent
}

That way the master page is not even used for the not-found route.

user_18257670

I didn't try this before, but you can create a notFoundPage.html file and place it under the assets folder, then you need a redirecting function in NotFoundComponent.ts to the HTML file. This approach is similar to working with sitemaps. You can check this link for more info.

user_175708660

Yes you can simply do it this way

1: First create a service where create a new subject

navIsVisibile = new BeheviourSubject(true);

2: Then when the 404 page is loaded just update the state of navIsVisibile.next(false). This need to be done on mount

3: You have to change to visibility again on destroy of the 404 component

`navIsVisibile.next(true)

4: Subscribe to the navIsVisibile in app.component.ts and based on navIsVisibile its state show the nav

Please check Behaviour subject doc: https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject

user_80213040
Related