Angular中如何动态替换bootstrapModule以切换页面模块

针对你的需求，我们可以通过动态选择启动模块的方式实现点击按钮切换应用根模块，同时保证两个模块的样式和布局完全隔离，具体步骤如下：

1. 重构应用启动逻辑（main.ts） #

修改主入口文件，根据本地存储标记动态选择要启动的根模块：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { WorkInProgressModule } from './app/work-in-progress/work-in-progress.module';
import { UpcomingWebsiteModule } from './app/upcoming-website/upcoming-website.module';

// 读取本地存储标记，判断是否启用新版网站
const enableUpcomingSite = localStorage.getItem('enableUpcomingSite') === 'true';

if (enableUpcomingSite) {
  platformBrowserDynamic().bootstrapModule(UpcomingWebsiteModule)
    .catch(err => console.error(err));
} else {
  platformBrowserDynamic().bootstrapModule(WorkInProgressModule)
    .catch(err => console.error(err));
}

2. 实现按钮切换逻辑 #

在"work-in-progress"页面的组件中，添加点击事件设置标记并刷新页面：

组件代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-work-in-progress',
  templateUrl: './work-in-progress.component.html',
  styleUrls: ['./work-in-progress.component.css']
})
export class WorkInProgressComponent {
  switchToUpcomingSite() {
    // 设置本地存储标记
    localStorage.setItem('enableUpcomingSite', 'true');
    // 刷新页面以加载新版模块
    window.location.reload();
  }
}

按钮HTML #

<button class="btn btn-primary" (click)="switchToUpcomingSite()">进入新版网站</button>

3. 隔离两个模块的样式与布局 #

确保两个根模块各自加载独立的样式文件，避免样式冲突：

WorkInProgressModule配置 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { WorkInProgressComponent } from './work-in-progress.component';

@NgModule({
  declarations: [WorkInProgressComponent],
  imports: [BrowserModule],
  bootstrap: [WorkInProgressComponent],
  // 仅加载当前模块的样式文件
  styles: ['./work-in-progress.global.css']
})
export class WorkInProgressModule { }

UpcomingWebsiteModule配置 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { UpcomingRootComponent } from './upcoming-root.component';
import { upcomingRoutes } from './upcoming-routes';

@NgModule({
  declarations: [UpcomingRootComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(upcomingRoutes)
  ],
  bootstrap: [UpcomingRootComponent],
  // 仅加载新版网站的样式文件
  styles: ['./upcoming.global.css']
})
export class UpcomingWebsiteModule { }

4. 未来移除过渡页面的操作 #

当不需要"work-in-progress"页面时，直接修改main.ts，默认启动新版模块即可：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpcomingWebsiteModule } from './app/upcoming-website/upcoming-website.module';

platformBrowserDynamic().bootstrapModule(UpcomingWebsiteModule)
  .catch(err => console.error(err));

之后删除"work-in-progress"相关的组件、模块文件即可完成迁移。

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