angular архитектура, при которой страница не найдена, отображает всю страницу

Question

1. Какая лучшая политика для архитектуры моего проекта angular для маршрутизации angular, любых хороших источников или книг?

2. Как отображать "без страницы" найдено "без отображения каких-либо других компонентов, моя angular архитектура выглядит следующим образом:

index. html

<app-root></app-root>

app.component. html

<div class="main-container">
    <header>
        <app-menu></app-menu> //for dark/light theme, language
        <app-header></app-header> //title
        <br>
        <app-nav></app-nav> //navbar menu
        <br>
    </header>
    <section>
        <router-outlet></router-outlet> //page body, to load further components
    </section>
    <footer>
        <app-footer></app-footer>
    </footer>
</div>

Путь маршрутизации «nopagefound»

{ path: '**', component: NopagefoundComponent },

он активируется для любого сайта, такого как «mydomain / xyz», который не находится на пути маршрутизации, но отображается, как показано ниже, с другими компонентами

<app-menu>
<app-header>
<app-nav>
{{no page found}}
<app-footer>

моя цель - отобразить его как

{{ no page found }} 

без каких-либо других компонентов

ОБНОВЛЕНИЕ: Спасибо, теперь у меня есть

Answer 1

Вы можете разделить свои маршруты:

Сначала создайте компонент макета:

Затем установите маршруты, как показано ниже:

export const routes: Routes = [
  {
    path: '',
    component: MainLayoutComponent,
    children: [
      {
        path: 'home',
        component: HomeComponent,
      },
      {
       // other route
      }
  },
  { path: 'not_found', component: NopagefoundComponent },
  { path: '**', redirectTo: 'not_found' },
]

Затем переместите содержимое ваш app.component.html кому нужен только <router-outlet></router-outlet> компонент макета,

Готово!

Answer 2

1. Первый метод: используйте служебную охрану и включите его в свой модуль маршрутизации.
2. Второй метод: вы можете использовать 2 модуля маршрутизации в ленивом режиме.
3. Третий метод: вы можете вводить маршруты внутри компонентов (app.nav, footer, ...) и обсуждать, является ли маршрут не найденным или другим.