Angular多应用间懒加载路由配置失效，页面显示空白问题求助

看起来你在尝试把projects目录下的app1作为懒加载模块集成到主应用，但页面空白的问题主要出在懒加载模块的配置错误和路由指向不正确上，我来一步步帮你修复：

核心问题分析 #

1. 懒加载的目标模块错误：你当前加载的是AppSharedModule，但这个模块是空的——没有配置路由，也没有关联任何可渲染的组件，所以加载后自然显示空白。
2. 子应用的模块结构不合理：子应用的AppModule是带有bootstrap的根模块，而懒加载应该使用特性模块（Feature Module），不需要自己启动应用。

具体修复步骤 #

1. 重构子应用app1，创建可懒加载的特性模块 #

在projects/app1/src/app下创建一个特性模块（比如App1Module），用来承载app1的路由和组件：

// projects/app1/src/app/app1.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
// 假设你有一个用来显示app1内容的组件，比如App1HomeComponent
import { App1HomeComponent } from './app1-home/app1-home.component';

// 配置app1的子路由，空路径对应主路由的/app1
const app1Routes: Routes = [
  { path: '', component: App1HomeComponent }
];

@NgModule({
  declarations: [App1HomeComponent], // 声明app1的组件
  imports: [
    CommonModule,
    RouterModule.forChild(app1Routes) // 用forChild配置子路由，不要用forRoot
  ]
})
export class App1Module { }

2. 修改主应用的路由配置，指向正确的懒加载模块 #

更新主应用AppRoutingModule里的loadChildren，指向刚才创建的App1Module，而不是空的AppSharedModule：

// src/app/app-routing.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  // 修正路径和模块指向
  { 
    path: 'app1', 
    loadChildren: () => import('../../projects/app1/src/app/app1.module')
      .then(m => m.App1Module) 
  }
];

3. 修复AppSharedModule（如果需要共享资源） #

如果AppSharedModule是用来在主应用和app1之间共享服务/组件的，需要补充必要的配置，避免空模块：

// projects/app1/src/app/app.module.ts里的AppSharedModule
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
  exports: [CommonModule] // 导出需要共享的模块
})
export class AppSharedModule {
  static forRoot(): ModuleWithProviders<AppSharedModule> {
    return { 
      ngModule: AppSharedModule,
      providers: [] // 这里可以添加共享的服务，比如全局状态服务
    };
  }
}

4. 可选：配置路径别名简化导入 #

为了避免冗长的相对路径，在主应用的tsconfig.json里添加路径别名：

{
  "compilerOptions": {
    // 其他配置...
    "paths": {
      "@app1/*": ["../projects/app1/src/app/*"]
    }
  }
}

之后主应用的路由可以简化为：

{ 
  path: 'app1', 
  loadChildren: () => import('@app1/app1.module').then(m => m.App1Module) 
}

5. 验证组件和模板 #

确保App1HomeComponent有对应的模板内容（比如在app1-home.component.html里写一些测试文本），这样懒加载后才能看到内容，而不是空白。

额外检查点 #

• 打开浏览器控制台，查看是否有模块找不到、组件未声明等错误，这些是空白页的常见诱因。
• 懒加载模块不要配置bootstrap，因为主应用已经负责启动整个应用了。

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