Angular 10 中主要組件內的延遲加載模塊

Question

我的應用程序中有兩個模塊，一個是app.module ，另一個是延遲加載的user.module 。 在app.module我有一個sign-in組件、 sign-up組件和main組件。 main.component是由導航欄和側邊欄組成的組件。 我想每一個組件內部user.module到里面加載main.component 。 但是我在控制台中收到錯誤Error: Cannot match any routes. URL Segment: 'user/home' Error: Cannot match any routes. URL Segment: 'user/home' 。

應用路由

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 { }

Answer 1

您應該在UserRoutingModule中導入和導出UserModule 。

@NgModule({
  declarations: [..],
  imports: [UserRoutingModule],
  exports: [UserRoutingModule],
  providers: [..]
})
export class UserModule {}

Answer 2

一切正常，您是否在 main.component.html 中指定了 router-outlet ？

<router-outlet></router-outlet>