延迟加载路由不起作用 Angular

Question

I have a project that is separated in various modules.我有一个项目，它被分成不同的模块。 The lazy loaded modules are the about and contact modules.延迟加载的模块是 about 和 contact 模块。 The navmenu that has the router links is in a feature module with the header and footer.具有路由器链接的导航菜单位于带有 header 和页脚的功能模块中。 I think I have done everything as it supposed to be with the code, but when I click on the about and contact button in the navmenu nothing happens(they don't redirect).我想我已经完成了代码应该做的所有事情，但是当我点击导航菜单中的关于和联系按钮时，什么也没有发生（它们不会重定向）。 But, when I manually write /about and /contact in the URL the pages seem to lazily load.但是，当我在 URL 中手动编写 /about 和 /contact 时，页面似乎会延迟加载。 I believe it has something to do with the module that consists the navmenu, but I can not seem to find a solution.我相信它与组成导航菜单的模块有关，但我似乎找不到解决方案。

This is the contact.module.ts(same as the about)这是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 {}

This is the contact.routing.module.ts这是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 {}

This is the app.routing.module.ts这是 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 {}

This is the navmenu.html这是导航菜单。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>

And the app.component.html和 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 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 {}

Answer 1

I think that you did not import routing module in CoreModule.我认为您没有在 CoreModule 中导入路由模块。

Answer 2

CoreUIModule not importing RouterModule would be the most reasonable theory. CoreUIModule不导入RouterModule将是最合理的理论。

延迟加载路由不起作用 Angular

问题描述

2 个解决方案

解决方案1
1 2021-04-20 16:12:26

解决方案2
0 2021-04-18 17:43:40

延迟加载路由不起作用 Angular

问题描述

2 个解决方案

解决方案1 1 2021-04-20 16:12:26

解决方案2 0 2021-04-18 17:43:40

解决方案1
1 2021-04-20 16:12:26

解决方案2
0 2021-04-18 17:43:40