为什么延迟加载不起作用？角 17

Question

我正在尝试创建具有延迟加载的管理面板。我创建了路径 /admin，但是当我移动到它时，什么也没有发生。它转到“/”路径并且什么也不显示。

app.routes.ts

import { Routes } from '@angular/router';
import { LoginComponent } from './component/login/login.component';
import { NotFoundComponent } from './component/not-found/not-found.component';


export const routes: Routes = [
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: '', 
        redirectTo: '/login', 
        pathMatch: 'full'
    },
    {
        path: 'admin',
        loadChildren: () => import('./component/admin/admin.module').then(m => m.AdminModule)
    },
    {
        path: '**', 
        component: NotFoundComponent
    }
    
];

admin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';



@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    AdminRoutingModule,
  ]
})
export class AdminModule { }

管理路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminDashboardComponent } from './Components/admin-dashboard/admin-dashboard.component';
import { ContactsComponent } from './Components/contacts/contacts.component';
import { ContactsDetailsComponent } from './Components/contacts-details/contacts-details.component';
import { HomeComponent } from './Components/home/home.component';

const routes: Routes = [
  {path: "", component: AdminDashboardComponent, children: [
    {path: 'contacts', component: ContactsComponent},
    {path: 'contacts/user/:id', component: ContactsDetailsComponent},
    {path: 'home', component: HomeComponent},
  ]},
  {}
];

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

您能帮我找出问题所在吗？

Answer 1

你可以检查一下控制台是否有错误。

您能否检查一下您已声明 AdminDashboardComponent 的模块。

如果您没有在任何地方声明它，请在 AdminModule 中声明它

admin.module.ts

@NgModule({
  declarations: [AdminDashboardComponent],
  imports: [
    CommonModule,
    AdminRoutingModule
  ]
})
export class AdminModule { }