Angular routerlink not working with lazyloading modules

Question

I'm trying to figure out lazyloading modules, which I have working. What doesn't work is routerlink= in my nav. A normal href='' does work though. I have a footer that links to a privacy page and a terms page, and they work fine with router link.

The full repo is available here: https://github.com/mjhandy/ng16Prototype

Here's my nav code snippet

<li class="nav-item">
   <a class="nav-link" href="/pages/typography" >Typography</a>
</li>          
<li class="nav-item">
   <a class="nav-link" routerlink="papges/typography" >Typography</a>
</li>

So as mentioned, the href link works fine.

Here is my app-router

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  { 
    path: '', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) 
  },
  { 
    path: 'privacy-policy', loadChildren: () => import('./pages/privacy-policy/privacy-policy.module').then(m => m.PrivacyPolicyModule) 
  },
  { 
    path: 'terms-conditions', loadChildren: () => import('./pages/terms/terms.module').then(m => m.TermsModule) 
  },
  { 
    path: 'pages/typography', 
    loadChildren: () => import('./pages/typography/typography.module').then(m => m.TypographyModule) 
  },
];

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

Now from the privacy-policy component I have the following files (excluding the obvious ones)

1. typography.component.ts

There is nothing here:

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

@Component({
  selector: 'app-typography',
  templateUrl: './typography.component.html',
  styleUrls: ['./typography.component.scss']
})
export class TypographyComponent {

}

2. typography.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TypographyComponent } from './typography.component';
import { TypographyRoutingModule } from './typography-routing.module';



@NgModule({
  declarations: [
    TypographyComponent
  ],
  imports: [
    CommonModule,
    TypographyRoutingModule
  ]
})
export class TypographyModule { }

3. typography-routing.module.ts

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

const routes: Routes = [{ path: '', component: TypographyComponent }];

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

If this is the wrong way to ask, please let me know. Thanks in advance!

The end goal is learning the best method of implement module lazy loading

Answer 1

By inspecting your project, your HeaderComponent is a standalone component, so you can't make it inherit the imports of your AppModule

That's why you need to add RouterModule in your standalone component

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

import { MatIconModule } from '@angular/material/icon';
import { LoginComponent } from './login/login.component';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  standalone: true,
  imports : [ MatIconModule, LoginComponent,RouterModule]
})
export class HeaderComponent {

}