Router-outlet not loading first component as expected

On my new angular project I have the following app.routes.ts file:

import { Route } from '@angular/router';

export const APP_ROUTES: Route[] = [
    {
        path: 'main',
        loadComponent: () => import('./modules/main/pages/main/main.component').then(mod => mod.MainComponent)
    },
    {
        path: 'login',
        loadComponent: () => import('./modules/login/pages/login/login.component').then(mod => mod.LoginComponent)
    },
    {
        path: 'config',
        loadComponent: () => import('./modules/login/pages/config/config.component').then(mod => mod.ConfigComponent)
    },
    {
        path: '', pathMatch: 'full', redirectTo: '/config'
    }
];

And the following main.ts file:

import { importProvidersFrom } from '@angular/core';
import { AppComponent } from './app/app.component';
import { provideNoopAnimations } from '@angular/platform-browser/animations';
import { APP_ROUTES } from './app/app.routes';
import { CommonModule } from '@angular/common';
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';


bootstrapApplication(AppComponent, {
    providers: [
        importProvidersFrom(BrowserModule, CommonModule),
        provideRouter(APP_ROUTES),
        provideNoopAnimations(),
    ]
})
.catch(err => console.error(err));

Considering my routes file I was expecting that the config component would automatically load when opening the app, but it doesn't.

This is the state of my app.component.html:

Teste

<br>

<a routerLink="/login">Login</a>
<a routerLink="/config">Config</a>

<br>

<router-outlet></router-outlet>

If I click in one of the links it manages to load the contents normally.

After searching in multiple resources nothing stood out to me as the reason for that behavior, could someone point if I missed something?

Thanks in advance and sorry for the english.

Edit:

This is the state of my app.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterLink, RouterOutlet, RouterModule } from '@angular/router';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    standalone: true,
    imports: [
        RouterOutlet, 
        BrowserModule, 
        RouterLink, 
        RouterModule
    ]
})
export class AppComponent {
}

Make sure your component that you set in routing is standalone:true only then the component will render.

So MainComponent, LoginComponent, ConfigComponent must be standalone true.

If it's not standalone, the you have to change the routing to lazy load these components using modules or easily just set them as standalone.

When working with standalone methodology, you do not need BrowserModule at all.

So your main.ts will look like.

import { importProvidersFrom } from '@angular/core';
import { AppComponent } from './app/app.component';
import { provideNoopAnimations } from '@angular/platform-browser/animations';
import { APP_ROUTES } from './app/app.routes';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';


bootstrapApplication(AppComponent, {
    providers: [
        importProvidersFrom(CommonModule),
        provideRouter(APP_ROUTES),
        provideNoopAnimations(),
    ]
})
.catch(err => console.error(err));

Then you can change the app.component.ts to only import RouterModule, since it already contains RouterLink, RouterOutlet, etc. I also removed the BrowserModule import you had imported.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterLink, RouterOutlet, RouterModule } from '@angular/router';
    
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    standalone: true,
    imports: [
        RouterModule
    ]
})
export class AppComponent {
}

Finally make sure your index.html looks like below, notice the important line <base href="/">.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Set the base href -->
    <base href="/">
    <title>Angular Router</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>