Angular routerlink not working with lazyloading modules

Mark Handy

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)

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 {

}

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 { }

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 impliment module lazy loading

Q.Rey

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 {

}

Collected from the Internet

Please contact [email protected] to delete if infringement.