Angular 延迟加载

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

现在我还没有为路径做一个重定向路径：''，在应用程序路由器模块中，但由于某种原因在 localhost:4200/ ，它加载了 home 模块。在 Augury 中，这是我目前看到的：

Augury Routing Tree

编辑* 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 路由器更改为它自己的主页文件-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 { }

Angular 延迟加载

Angular Lazy Loading

frontend

lazy-loading

typescript

angular