文章/答案/技术大牛

发布

社区首页 >问答首页 >惰性加载路由无法正常工作

问惰性加载路由无法正常工作
EN

Stack Overflow用户

提问于 2021-04-19 00:28:40

回答 2查看 143关注 0票数 0

我有一个项目，是在不同的模块分开。延迟加载的模块是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 {}

lazy-loading

angular

routes

回答 2

Stack Overflow用户

发布于 2021-04-21 00:12:26

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

票数 1

Stack Overflow用户

发布于 2021-04-19 01:43:40

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67150876

复制

相似问题

问惰性加载路由无法正常工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问惰性加载路由无法正常工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问惰性加载路由无法正常工作
EN