Angular 17 <router-outlet> works wrong

Question

So i am building projects in angular and i found out that in devtools i can see my router-outlet and components are generated outside of it like that:

app.routes

import { Routes } from '@angular/router';
import { LoginComponent } from './core/auth/pages/login/login.component';
import { authGuard } from './core/auth/auth.guard';
import { LayoutComponent } from './core/layout/layout.component';

export const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, // Domyślne przekierowanie
  { path: 'login', component: LoginComponent },
  {
    path: '',
    component: LayoutComponent,
    canActivate: [authGuard],
    children: [
      { path: 'dashboard', loadComponent: () => import('./features/dashboard/dashboard.component').then(m => m.DashboardComponent) },
      { path: 'add', loadComponent: () => import('./features/add/add.component').then(m => m.AddComponent) },
      { path: 'warehouse', loadComponent: () => import('./features/warehouse/warehouse.component').then(m => m.WarehouseComponent) },
      { path: 'records', loadComponent: () => import('./features/records/records.component').then(m => m.RecordsComponent) },
      { path: 'settings', loadComponent: () => import('./features/settings/settings.component').then(m => m.SettingsComponent) },
    ]
  },
  { path: '**', redirectTo: '/login' } // Catch-all przekierowanie
];

app.component

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'PS-new';
}

app.component.html

<router-outlet />

I can't find a solution for that, pls help me It's not the routing problem i've already check it, all the files looks okey.

Answer 1

This is how the router-outlet works. The routed components are added after the router-outlet element.