Angular 14路由跳转/login页面显示空白问题求助

• 已完成Angular 7到14的版本升级，编译过程无错误，但在浏览器中加载应用时，/login路由始终显示空白页面。
• 目前app-routing.module中的路由配置如下：

{ path: 'login', loadChildren: () => import('./pages/login/login.module').then(m => m.LoginPageModule) }

该配置指向的模块路径正确，应用会在检测到无用户会话时自动跳转到/login页面，但LoginPage的构造函数或ngOnInit中的console.log语句完全没有输出，说明组件根本没加载。

• LoginPage并非独立组件，目录结构如下：

-- login
   -- login.module.ts
   -- login.page.html
   -- login.page.scss
   -- login.page.ts

• 尝试将路由改为直接指向组件：

{ path: 'login', component: LoginPage },

此时控制台Elements标签能看到正确的HTML结构，但浏览器页面依然没有任何内容显示。

• LoginModule的完整代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

import { LoginPage } from './login.page';
import { ComponentsModule } from 'src/app/components/components.module';

const routes: Routes = [
 {
    path: '',
    component: LoginPage
 }
];

@NgModule({
   imports: [
     CommonModule,
     ComponentsModule,
     FormsModule,
     IonicModule,
     MatAutocompleteModule,
     MatDialogModule,
     MatInputModule,
     ReactiveFormsModule,
     RouterModule.forChild(routes)
  ],
  providers: [
    { provide: MAT_DIALOG_DATA, useValue: {} },
    { provide: MatDialogRef, useValue: {} }
  ],
  declarations: [
    LoginPage
  ]
})
export class LoginPageModule {}

更新 #

移除LoginModule中对ComponentsModule（包含页眉、页脚等通用组件）的引入后，控制台能看到LoginPage加载了部分数据，但页面仍然是空白状态。正在准备制作stackblitz来复现该问题。

内容的提问来源于stack exchange，提问作者Steve