延迟加载路线不起作用答案

【问题标题】：Lazy loading routes are not working Angular延迟加载路线不起作用
【发布时间】：2021-04-18 16:28:39
【问题描述】：

我有一个项目，分为多个模块。延迟加载的模块是 about 和 contact 模块。具有路由器链接的导航菜单位于带有页眉和页脚的功能模块中。我想我已经完成了代码应该做的所有事情，但是当我点击导航菜单中的关于和联系按钮时，什么也没有发生（它们不会重定向）。但是，当我在 URL 中手动编写 /about 和 /contact 时，页面似乎会延迟加载。我相信它与组成导航菜单的模块有关，但我似乎找不到解决方案。

这是contact.module.ts（和about一样）

import { NgModule } from '@angular/core';
import { ContactRoutingModule } from './contact-routing.module';
import { ContactComponent } from './contact.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
declarations: [ ContactComponent ],
imports: [ SharedModule, ContactRoutingModule ],
exports: [ ContactComponent ]
})
export class ContactModule {}

这是contact.routing.module.ts

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

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

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

这是 app.routing.module.ts

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

const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomepageComponent },
{ path: 'about', loadChildren: () => import('./aboutus/aboutus.module').then((m) => m.AboutusModule) 
},
{ path: 'contact', loadChildren: () => import('./contact/contact.module').then((m) => 
m.ContactModule) }
];

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

这是 navmenu.html

<div class="b-navbar__navDesktop">
  <a routerLink="/home" class="b-navbar__link">Home</a>
  <a class="b-navbar__link" href="#">Services</a>
  <a routerLink="/about" class="b-navbar__link">About</a>
  <a class="b-navbar__link" href="#">Reviews</a>
  <a class="b-navbar__link" href="#">Locations</a>
  <a routerLink="/contact" class="b-navbar__link">Contacts</a>
</div>

还有 app.component.html

 <body>
<app-header></app-header>
<app-nav-menu></app-nav-menu>
<router-outlet></router-outlet>
<app-footer></app-footer>
</body>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule } from '@angular/common/http';
import { HomepageModule } from './homepage/homepage.module';
import { SharedModule } from './shared/shared.module';

import { CoreUIModule } from './core-ui/core-ui.module';

@NgModule({
declarations: [ AppComponent ],
imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    HttpClientModule,
    HomepageModule,
    SharedModule,
    CoreUIModule
],
providers: [],
bootstrap: [ AppComponent ]
})
 export class AppModule {}

【问题讨论】：

请添加您的 AppModule 的内容
添加-app.module.ts 。我认为问题在于包含路由器链接的导航菜单组件位于功能模块中（但不知道如何修复它）
你的代码对我来说工作得很好。你能提供问题的 StackBlitz 重现吗？
我似乎无法在 StackBlitz 中制作代码，这似乎是个问题
我得出的结论是，当我在 CoreUI 模块（即整个 CoreUi 文件夹）之外删除导航菜单时，导航路由器链接似乎可以工作。但这不是我想要的。我希望 CoreUI 中的导航菜单能够正常工作。

标签： angular routes lazy-loading

【解决方案1】：

我认为你没有在 CoreModule 中导入路由模块。

【讨论】：

【解决方案2】：

CoreUIModule 不导入 RouterModule 将是最合理的理论。

【讨论】：

我在CoreUIModule中导入了AppRoutingModule，还是不行