Angular 14.2.8 延迟加载不创建块

Question

我对 Angular 相当陌生，并且尝试过实现延迟加载，但在加载时无法看到块

这是我的项目结构：

[![在此处输入图像描述][2]][2]

我的代码如下：功能路由模块

import { Injectable, NgModule } from '@angular/core';
import {  Routes,    RouterModule} from '@angular/router';
import { HomeComponent } from './HomeComponent/home-component.component';
const routes: Routes = [
    { path: "", component: HomeComponent, children:[
        { path: "home", component: HomeComponent }
    ]},
   

];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class FeatureRoutingModule {

}

功能模块

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { HomeComponent } from "./HomeComponent/home-component.component";
import { FeatureRoutingModule } from "./feature.routing.module";
import { Signup } from "./SignupComponent/signup.component";


@NgModule({
imports: [FeatureRoutingModule ,CommonModule, ReactiveFormsModule],// importing loaded childs here
declarations:[Signup , HomeComponent]// declaring components here
})

export class FeatureModule {

}

应用程序路由模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CatalogComponentComponent } from './catalog/catalog-component/catalog-component.component';

const route1: Routes=[
  {path:'catalog' , component: CatalogComponentComponent},
  {path: 'home' ,  loadChildren: ()=> import('./FeaturesModules/feature.module').then(m=>m.FeatureModule)}
]

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

应用程序模块

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HeaderComponentComponent } from './shared/header-component/header-component.component';

import { HttpClientModule } from '@angular/common/http';
import { FeatureModule } from './FeaturesModules/feature.module';
import { CatalogComponentComponent } from './catalog/catalog-component/catalog-component.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponentComponent,
    CatalogComponentComponent

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    FeatureModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HeaderComponentComponent } from './shared/header-component/header-component.component';

import { HttpClientModule } from '@angular/common/http';
import { FeatureModule } from './FeaturesModules/feature.module';
import { CatalogComponentComponent } from './catalog/catalog-component/catalog-component.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponentComponent,
    CatalogComponentComponent

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    FeatureModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

编辑：更新的应用程序路由模块模块路径 [1]：https: //i.stack.imgur.com/NqlgR.png [2]：https://i.stack.imgur.com/S7GPS.png [3]：https://i.stack.imgur.com/fHR4F.png [4]: https://i.stack.imgur.com/gB60q.png [5]: https://i.stack.imgur.com/ mNp3e.png [6]：https://i.stack.imgur.com/oz3qg.png

Answer 1

您不应该将功能模块定义到应用程序模块中，这会破坏延迟加载的目的。

在您的代码中：

@NgModule({
导入: [FeatureModule ]
bootstrap: [AppComponent]
})
导出类 AppModule { }

https://github.com/kmohan0910/farm.io/blob/84aadadac987a48ac766a191008cb0f4b1b2b761/src/app/app.module.ts#L27