在Angular上设置惰性负载无法正常工作

Question

开发者好，我正试图在我的应用程序中实现延迟加载逻辑，但由于某种原因，它不起作用。

我之前创建了两个页面，特别是它的模块和路由模块，第三个页面将是前两个页面的管理角色，处理它们的路由，并导入到应用程序模块。对于第一个组件(表1和表2(，我设置了以下逻辑：

FIRST SETTING ITS ROUTING MODULE
import { Tab1Component } from './tab1.component';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
const routes: Routes = [
{
path: '',
component: Tab1Component/Tab2Component,
},
];
@NgModule({
declarations: [],
imports: [CommonModule, RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class Tab1RoutingModule/Tab2RoutingModule {}

然后为每个文件夹建立模块(表1和表2(

SECOND SETTING THE MODULE FILE FOR EACH COMPONENT
import { Tab1RoutingModule } from '../tab1/tab1-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Tab1Component } from './tab1.component';
@NgModule({
declarations: [Tab1Component],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
Tab1RoutingModule/Tab2RoutingModule
],
exports:[Tab1Component]
})
export class Tab1Module/Tab2Module {}

在第三个组件中，这将是我通过loadchildren设置的管理组件，前两个组件的模块代表的费用如下

THIRD ADMINSTRATIVE PAGE SETTING ALL CHILDREN ROUTES
import { NgModule } from '@angular/core';
import { MenuAdminComponent } from './menu-admin.component';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'tabs',
component: MenuAdminComponent,
children: [
{
path: 'tab1',
loadChildren: () =>
import('../../pages/tab1/tab1.module').then((m) => m.Tab1Module),
},
{
path: 'tab2',
loadChildren: () =>
import('../../pages/tab2/tab2.module').then((m) => m.Tab2Module),
},
],
},
{
path: '**',
redirectTo: '/tabs/tab1',
pathMatch: 'full',
},
];
@NgModule({
declarations: [],
imports: [RouterModule.forChild(routes)],
})
export class MenuAdminRoutingModule { }

并且它的模块导入其中另一个组件的前两个模块将以这种方式建立：

import { MenuAdminRoutingModule } from '../menu-admin/menu-admin-routing.module';
import { MenuAdminComponent } from '../menu-admin/menu-admin.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Tab2Module } from '../tab2/tab2.module';
import { Tab1Module } from '../tab1/tab1.module';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
declarations: [MenuAdminComponent],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
Tab2Module,
Tab1Module,
MenuAdminRoutingModule,
MatToolbarModule,
MatIconModule,
],
exports: [MenuAdminComponent],
})
export class MenuAdminModule {}

然后在我的应用程序模块路由上，我只会调用管理页面：

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () =>
import('./pages/menu-admin/menu-admin.module').then((m) => m.MenuAdminModule),
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule],
})
export class AppRoutingModule {}

并且应用程序模块会将以前的组件模块导入

import { MenuAdminModule } from './pages/menu-admin/menu-admin.module';
import { ComponentsModule } from './components/components.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Tab1Module } from './pages/tab1/tab1.module';
import { Tab2Module } from './pages/tab2/tab2.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,

ComponentsModule,
MenuAdminModule,
Tab1Module,
Tab2Module
],

bootstrap: [AppComponent]
})
export class AppModule {}

但出于某种原因，当我将路由设置为tab1或tab2时，路由器会在管理页面上设置我("enu-admin-works"(。在这里https://stackblitz.com/github/enriquefgf86/bookmark-material我设置了问题。任何帮助都将是惊人的。真的谢谢！！！

Answer 1

问题出在您的路由结构和组件上：-

我将菜单路由配置更改为：-

import { NgModule } from '@angular/core';
import { MenuAdminComponent } from './menu-admin.component';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { MenuHomeComponent } from './menu-home/menu-home.component';
const routes: Routes = [
{
path: 'tabs',
component: MenuAdminComponent,
children: [
{
path: '',
component: MenuHomeComponent
},
{
path: 'tab1',
loadChildren: () =>
import('../../pages/tab1/tab1.module').then((m) => m.Tab1Module),
},
{
path: 'tab2',
loadChildren: () =>
import('../../pages/tab2/tab2.module').then((m) => m.Tab2Module),
},
],
},
// {
//   path: '**',
//   redirectTo: '/tabs/tab1',
//   pathMatch: 'full',
// },
];
@NgModule({
declarations: [],
// imports: [
//   RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
// ],
exports: [RouterModule],
imports: [RouterModule.forChild(routes)],
})
export class MenuAdminRoutingModule { }

其中菜单主组件是一个新组件。

我将菜单管理组件的模板转移到了菜单主页组件。

我在菜单管理组件中添加了一个路由器出口。

这就是所谓的嵌套路由器出口，你可以在这里阅读更多：-https://medium.com/dev-genius/the-art-of-nested-router-outlets-in-angular-dafb38245a30

工作堆叠：-https://stackblitz.com/edit/github-g1cauu?file=src/app/pages/menu-admin/menu-admin-routing.module.ts