问题描述
我的应用程序中有两个模块,一个是 app.module
,另一个是延迟加载的 user.module
.在 app.module
上,我有一个 sign-in
组件、sign-up
组件和 main
组件.main.component
是由导航栏和侧边栏组成的组件.我希望 user.module
中的每个组件都加载到 main.component
中.但是我在控制台中收到错误 Error: Cannot match any routes.URL 段:'user/home'
.
I got two modules in my application one is the app.module
and another one is user.module
which gets lazy-loaded. On the app.module
I got a sign-in
component, sign-up
component and main
component. The main.component
is the component consisting of a navbar and a sidebar. I want every component inside user.module
to load inside the main.component
. But I'm getting error in console Error: Cannot match any routes. URL Segment: 'user/home'
.
app.routing
app.routing
import { MainComponent } from './main/main.component';
import { SignInComponent } from './sign-in/sign-in.component';
import { SignUpComponent } from './sign-up/sign-up.component';
const routes: Routes = [
{ path: 'sign-in', component: SignInComponent, pathMatch: 'full' },
{ path: '', redirectTo: 'sign-in', pathMatch: 'full' },
{ path: 'sign-up', component: SignUpComponent }
{
path: '',
component: MainComponent,
children: [
{
path: 'user',
loadChildren: () => import('./user/user.module').then(m => m.UserModule)
},
]
},
/* { path: '500', component: Error500Component },
{ path: '**', component: Error404Component }, */
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
user.routing
user.routing
import { HomeComponent } from './home/home.component';
import { Routes, RouterModule } from '@angular/router';
import { FriendsComponent } from './friends/friends.component';
const routes: Routes = [
{
path: '',
children: [
{ path: 'home', component: HomeComponent },
{ path: 'friends', component: FriendsComponent }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }
推荐答案
一切正常,你在 main.component.html 中指定了 router-outlet 吗?
everything looks ok, have you specified router-outlet in your main.component.html ?
<router-outlet></router-outlet>
这篇关于Angular 10 中主要组件内的延迟加载模块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!