Angular 10 中的延迟加载路由答案

【问题标题】：Lazy-Loading Routing in Angular10Angular 10 中的延迟加载路由
【发布时间】：2021-02-25 07:21:56
【问题描述】：

如果有人尝试编写这样的延迟加载并获得成功，请提供帮助，我在这里遇到了问题。我创建了一个 Angular 应用程序并尝试使用延迟加载，但它对我没有帮助。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {EmployeeComponent} from './employee/employee.component';
import {RegistrationComponent} from './registration/registration.component';

const routes: Routes = [
                        {
                            path:'',
                            component:EmployeeComponent
                        },
                        {
                            path:'employee/registration',
                            component: RegistrationComponent
                        }
                        ]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class HrRoutingModule { }

这是我的代码，我绑定到应用程序中的路由，例如：

const routes: Routes = [
    {
        path: '',
        component: LayoutComponent,
        children: [
            {
                path: '',
                component: EmployeeComponent
            },
            {
                path: 'employee',
                loadChildren: () => import('./hr/hr.module').then(m => m.HrModule)
            }
]

我刚刚创建了一个名为 hr 的子文件夹，在该 hr 中我添加了另外两个文件夹，例如员工和注册，但在 hr-routing-module.ts 文件中，我刚刚添加了一个代码和 hr-module 文件和组件同样，在 app-routing.ts 文件中，我刚刚添加了以下代码。那么它是正确的连接方式还是我必须单独声明所有组件？

【问题讨论】：

标签： angular typescript routes lazy-loading angular10

【解决方案1】：

在应用组件中

在布局组件中

在 hrModule 中导入：[CommonModule, RouterModule.forChild(routes)],

【讨论】：

在app组件app-layout标签中
布局组件中的路由器出口
我在 hr-routing 文件中做了这个，所以不需要在 hrModule 中再次重复。