I have the following child routing specified in the app-routing.module.ts file:
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{
path: 'home', component: HomeComponent, children: [
{
path: 'ingredients',
component: IngredientsComponent
}]
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
The home.component.html template looks like:
...
...
...
<div [routerLink]="'ingredients'">Ingredients</div>
<button type="submit" class="flex w-max justify-center items-center space-x-2 rounded-md border border-transparent bg-red-600 py-2 px-4 text-base text-white hover:bg-red-700 focus:outline-none">
<span>Log out</span>
</button>
</div>
<div class="flex flex-row bg-white">
<router-outlet></router-outlet>
</div>
</div>
When i click the routerLink, everything works fine, the ingredients.component.html template is inserted at <router-outlet></router-outlet> and the page is renders fine.
Although when i just type the url in the browser window http://localhost:4200/home/ingredients
The page is not loaded, and the console says:
My index.html looks like:
<app-root></app-root>
My app.component.html looks like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!-- Background shape -->
<div class="fixed top-0 -z-10 w-full h-1/2 bg-gradient-to-r from-amber-500 to-amber-400"></div>
<div class="text-center mt-24 mb-24">
<p class="text-5xl font-Poppins font-bold text-white mb-4">Shopping Buddy <fa-icon [icon]="shoppingBagIcon" size="sm"></fa-icon></p>
<ng-container *ngIf="showSecondaryText">
<p class="text-2xl font-bold font-Poppins text-white">Clever grocery list for weekly shopping.</p>
</ng-container>
</div>
<router-outlet></router-outlet>
</body>
</html>
