Angular RouterLink breaks the whole Layout

Question

I already built an Angular-App with ~8 Pages and fully functional Routing.

Now on another machine, I struggle to set up routing again and I don't see my error.

I activated routing when creating the app, so angular already created the AppRoutingModule and imported it in the AppModule.

After defining some simple routes, this is still not working.

app.component.html:

<router-outlet></router-outlet>

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TestComponent } from './test/test.component';

const routes: Routes = [
  {path: 'test', component: TestComponent},
  {path: '', redirectTo: 'test'},
  {path: '**', redirectTo: 'test'}
];

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

This somehow shows an empty, white screen.

When exchanging the content of the app.component.html to this:

<app-test></app-test>

everything is fine:

The test.component.html:

<div class="flex">
    <div class="item i-1">Flex Item 1</div>
    <div class="item i-2">Flex Item 2</div>
</div>

which following styling:

.flex {
    display: flex;
    height: 100vh;
    width: 100vw;
}

.item {
    flex: 1;
    text-align: center;
}

.i-1 {
    background-color: aqua;
}

.i-2 {
    background-color: greenyellow;
}

But now the problem to which I referred in the title: When I provide a routerLink in the html, the page breaks:

<div class="flex">
    <div routerLink="test" class="item i-1">Flex Item 1</div>
    <div class="item i-2">Flex Item 2</div>
</div>

Neither the text in the routerLink-div, nor the second flex-box-item is rendering.

I would assume that these problems are connected, but what else is there to do, other than defining the needed routes?

I tried moving all the routing-logic to the app-module which is working for me in my other project, but it changed nothing.

I followed the steps provided by the official angular documentation: https://angular.io/guide/router

Answer 1

This is due to the default route missing an argument:

Changing

{path: '', redirectTo: 'test'}

to

{path: '', redirectTo: 'test', patchMatch: 'full'}

resolves the routes and also the routerLink issue.

(I somehow missed the console errors while testing)