如何在Angular中创建独立于router-outlet的全屏404页面

Got it, let's sort out this fullscreen 404 problem for your Angular app! Right now, your NotFoundComponent is rendering inside the main router-outlet—which is wrapped with your navbar and footer—so those elements always stay visible. Here's a clean, Angular-friendly way to make your 404 take over the entire page:

Step 1: Restructure Your Routing #

The core idea is to separate your "normal" page layout (with navbar/footer) from the 404 page. We'll use a dedicated layout component to hold shared UI elements, then nest all regular routes under this layout.

Update your app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppLayoutComponent } from './app-layout/app-layout.component'; // 新建布局组件
import { HomeComponent } from './home/home.component'; // 示例：你的其他页面组件
import { AboutComponent } from './about/about.component'; // 示例：你的其他页面组件
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  // 所有需要navbar/footer的页面都放在这个父路由下
  {
    path: '',
    component: AppLayoutComponent,
    children: [
      { path: '', component: HomeComponent }, // 首页
      { path: 'about', component: AboutComponent }, // 关于页
      // 添加你所有其他正常页面的路由
    ]
  },
  // 404路由独立出来，不使用布局组件
  { path: '**', component: NotFoundComponent }
];

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

Step 2: Create the Layout Component #

Make a new component (e.g., AppLayoutComponent) to hold your shared UI. Move the navbar, footer, and inner router-outlet from app.component.html to this new component:

app-layout.component.html:

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

Step 3: Simplify the Root App Component #

Update app.component.html to only contain the root router-outlet—it will render either the layout component (for valid pages) or the 404 component:

<router-outlet></router-outlet>

Step 4: Style the 404 Component for Fullscreen #

Ensure your NotFoundComponent takes up the entire viewport. Add this to not-found.component.css:

:host {
  display: block;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 自定义背景色、字体等样式 */
  background-color: #f8f9fa;
}

p {
  font-size: 5rem;
  font-weight: 700;
  color: #333;
}

Why This Works #

By wrapping regular pages in a layout component, you ensure the navbar and footer only load for valid routes. The 404 route is independent, so it renders directly in the root router-outlet without any shared layout elements—exactly the fullscreen effect you're aiming for.

内容的提问来源于stack exchange，提问作者Henrik Varga