角度延迟加载

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

编辑* 当我回家路线时的样子：

Edit* 将 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 { }