Angular 角度10中主要部件内的延迟加载模块
我的应用程序中有两个模块,一个是Angular 角度10中主要部件内的延迟加载模块,angular,lazy-loading,angular-routing,Angular,Lazy Loading,Angular Routing,我的应用程序中有两个模块,一个是app.module,另一个是user.module,它被延迟加载。在app.module上,我得到了一个sign-in组件、sign-up组件和main组件。main.component是由导航栏和侧栏组成的组件。我希望user.module中的每个组件都加载到main.component中。但我在控制台error中遇到错误:无法匹配任何路由。URL段:“用户/主页” app.routing import { MainComponent } from './m
app.module
,另一个是user.module
,它被延迟加载。在app.module
上,我得到了一个sign-in
组件、sign-up
组件和main
组件。main.component
是由导航栏和侧栏组成的组件。我希望user.module
中的每个组件都加载到main.component
中。但我在控制台error中遇到错误:无法匹配任何路由。URL段:“用户/主页”
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 { }
用户路由
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 { }
您应该在
UserModule
中导入和导出UserRoutingModule
@NgModule({
declarations: [..],
imports: [UserRoutingModule],
exports: [UserRoutingModule],
providers: [..]
})
export class UserModule {}
看起来一切正常,您是否在main.component.html中指定了路由器出口
<router-outlet></router-outlet>
您需要共享错误和完整的用户路由.ts
code更新..立即检查。如果您还需要更多信息,请告诉我,我将创建一个stackblitz代码段查看我的答案,您的代码看起来正常,因此我只能假设您缺少UserRoutingModule
内部UserModule