角度延遲加載

Question

最近在延遲加載方面遇到了一些麻煩。 現在我不確定這是否應該發生（我已經嘗試尋找問題，但如果我說實話，我什至不確定如何表達）。

所以我會像通常那樣為延遲加載模塊的設置做所有事情。 從確保正確設置應用程序路由模塊開始的一切：

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: 'home', loadChildren: './shared/modules/homepage/homepage.module#HomepageModule' }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

然后，確保使用延遲加載模塊正確設置所有內容，在本例中為主頁模塊：

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Routes, RouterModule } from '@angular/router'; //~~~~ Important: import { HomeMainComponent } from './components/home-main/home-main.component'; const homeRoutes: Routes = [ { path: '', component: HomeMainComponent, } ] @NgModule({ declarations: [ HomeMainComponent ], imports: [ CommonModule, RouterModule.forChild(homeRoutes), ], exports: [ HomeMainComponent ] }) export class HomepageModule { }

現在我還沒有在應用程序路由器模塊中為 path: '' 做一個重定向路徑，但由於某種原因在 localhost:4200/ ，它加載了 home 模塊。 在 Augury 這就是我目前看到的：

Augury 路由樹

編輯* 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'; //~~~~ Important: import { CoreModule } from './core/core.module'; import { SharedModule } from './shared/shared.module'; import { FeaturesModule } from './features/features.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, CoreModule, SharedModule, FeaturesModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

編輯*我回家路線時的樣子：

編輯 * 將 homepage.module.ts 路由器更改為它自己的文件到 homepage-routing.module.ts：

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeMainComponent } from './components/home-main/home-main.component'; const homeRoutes: Routes = [ { path: '', component: HomeMainComponent, }, ]; @NgModule({ declarations: [ HomeMainComponent, ], imports: [RouterModule.forChild(homeRoutes)], exports: [ HomeMainComponent, RouterModule] }) export class HomepageRoutingModule { }

根據我的理解，我已經正確地完成了所有事情，並且我已經做了很多次以知道這里出了什么問題。 有人對我缺少的東西有任何想法嗎？ 謝謝！

已解決****：原來我使用的是 app-routing.module，而我應該為 Shared.module 使用路由模塊。 所以基本上，擺脫或 app-routing.module 並執行我在 shared-routing.module 中所做的一切，這將解決問題。 謝謝大家的幫助！

Answer 1

新版本的延遲加載方式發生了變化，將路由配置重構為：

const routes: Routes = [
  { 
    path: 'home', 
    loadChildren: () => import('./shared/modules/homepage/homepage.module').then(m => m.HomepageModule)
  },
];

並在 HomeModule 中導出 RouterModule：

@NgModule({
  declarations: [
    HomeMainComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(homeRoutes),
  ],
  exports: [
    HomeMainComponent,
    RouterModule 
  ]
})
export class HomepageModule { }