Angular routerlink 不适用于延迟加载模块

Question

我正在尝试找出我正在工作的延迟加载模块。我的导航中的

routerlink=

不起作用。正常的

href='

' 确实有效。我有一个链接到隐私页面和条款页面的页脚，它们与路由器链接一起工作得很好。

完整的仓库可以在这里找到：https://github.com/mjhandy/ng16Prototype

这是我的导航代码片段

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

如上所述，href 链接工作正常。

这是我的应用程序路由器

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

现在，从隐私策略组件中，我有以下文件（不包括明显的文件）

1. typography.component.ts

这里什么都没有:

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. 排版路由.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 { }

如果这是错误的询问方式，请告诉我。 预先感谢！

最终目标是学习实现模块延迟加载的最佳方法

Answer 1

通过检查你的项目，你的

HeaderComponent

是一个独立的组件，所以你不能让它继承你的

imports

的

AppModule

这就是为什么您需要在独立组件中添加

RouterModule

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 {

}