Angular14.2.8延遲加載不創建塊

我對 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

uj5u.com熱心網友回復：

你不應該在 app 模塊中定義功能模塊，它會破壞延遲加載的目的。

在您的代碼中：

@NgModule({
imports: [FeatureModule ]
bootstrap: [AppComponent]
})
匯出類 AppModule { }

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

uj5u.com熱心網友回復：

根據您在父模塊中的實作，只有一個路由定義哪個是主模塊，因此當您的應用程式在您單擊homeRoute 時加載時，然后FeatureModule呼叫該模塊的方面。

如果你想測驗延遲加載，那么在 app.routing 模塊中添加一些其他路由，當應用加載時延遲模塊沒有加載但是當你點擊延遲加載模塊的路由時，然后獲取延遲加載模塊

標籤：有角度的延迟加载

上一篇：打字稿中的第31天更改為第1天

下一篇：Angular不會根據JSON回應創建物件