Angular：延迟模块加载不起作用

Question

我尝试实现延迟模块加载，但还没有成功。
我想要当用户转到/ admin时-AdminModule将启动，
并且当用户转到/ admin / user时-AdminModule的UserComponenet将启动。

这是我的应用程序的文件夹结构：

在我的应用中，我有 AppModule ：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const routes: Routes = [
  {path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
 ];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent html文件：

--- App Componenet --- <br /><br />
<a routerLink="admin">admin</a><br />
<a routerLink="admin/home">admin/home</a><br />
<a routerLink="admin/user">admin/user</a><br />

<br /><br />
Router outlet result: <br />
<router-outlet></router-outlet>

AdminModule文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { UserComponent } from './user.component';

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'user', component: UserComponent },
    { path: '', component: HomeComponent }
];

@NgModule({
  declarations: [
    HomeComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forChild(routes)
  ]
})
export class AdminModule { }

HomeComponent html文件：

Home Works!

UserComponent html文件：

User Works!

我做错了什么？谢谢。

Answer 1

尝试如下更改AdminModule

导入BrowserModule的CommonModule接口

@NgModule({
  declarations: [
    HomeComponent,
    UserComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class AdminModule { }

example