角延迟加载

debugcn 发表于 Dev

杰里姆·霍夫

最近在延迟加载方面遇到了一些麻烦。现在，我不确定这是否应该发生（我已经尝试搜索该问题，但是如果我说实话，我什至不知道如何措辞）。

因此，我会像平时一样为设置延迟加载的模块做所有事情。确保正确设置应用程序路由模块的所有操作如下：

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中，这是我目前看到的内容：

奥古里路由树

编辑*的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中所做的所有事情，这将解决该问题。谢谢大家的帮助！

拉斐尔·卢西尼（Rafael Lucini）

在较新版本中更改了延迟加载的方式，将路由的配置重构为：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。