[英]Angular 10 lazy Loading and routing doesn't function
我在 Angular 10.1.6 中尝试路由和延迟加载,但由于某种原因我无法发现,模块的路由和延迟加载似乎根本不起作用。 我试图将它与 Angular 网站上的股票示例代码进行比较,但即使在多次尝试解决问题之后我也找不到问题。
我的 App.module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EventsComponent } from './events/events.component';
@NgModule({
declarations: [AppComponent, EventsComponent],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
这是我的应用程序路由模块:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EventsComponent } from './events/events.component';
const routes: Routes = [
{ path: 'events', component: EventsComponent },
{
path: 'user',
loadChildren: () =>
import('./User/user-profile/user-profile.module').then(
(m) => m.UserProfileModule
),
},
{ path: '**', redirectTo: '', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
app.component 模板只有 2 个按钮,用于根据需要设置指向 URL 的路由器链接。 app.component.html 看起来像这样:
<p>{{ title }}</p>
<button [routerLink]="['events']">Events</button>
<button [routerLink]="['user/profile']">User Profile</button>
我试图延迟加载的模块,用户配置文件模块如下所示:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserProfileRoutingModule } from './user-profile-routing.module';
import { UserProfileComponent } from './user-profile.component';
@NgModule({
declarations: [UserProfileComponent],
imports: [CommonModule, UserProfileRoutingModule],
})
export class UserProfileModule {}
并且有自己的路由模块,如下所示:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserProfileComponent } from './user-profile.component';
const routes: Routes = [{ path: 'profile', component: UserProfileComponent }];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class UserProfileRoutingModule {}
我做错了什么/错过了什么,路由和延迟加载不能简单地工作?
点击按钮的结果很简单:
完整的项目代码在这里: https : //bitbucket.org/Anirudh_Nandavar/lazyload_angular/src/master/
预先感谢您的帮助!
你忘了把<router-outlet>
标签放在你的app.component.html
:
<p>{{ title }}</p>
<button [routerLink]="['events']">Events</button>
<button [routerLink]="['user/profile']">User Profile</button>
<router-outlet></router-outlet> <================================= this one
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.