动态修改@NgModule中的Bootstrap入口组件

你之前的方案行不通，核心原因是Angular的@NgModule装饰器元数据是编译阶段处理的，这时候还无法读取运行时的LocalStorage，直接在bootstrap数组里调用map.get()会得到undefined，导致组件无法正常引导。

下面是可行的实现方案：

步骤1：修改AppModule配置 #

先移除@NgModule里的bootstrap数组，让模块不预设启动组件：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FirstComponent } from './first.component';
import { SecondComponent } from './second.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [FirstComponent, SecondComponent],
  // 移除bootstrap配置，或者设为空数组
  entryComponents: [FirstComponent, SecondComponent] // Angular 9+ 可省略，旧版本需要声明
})
export class AppModule { }

步骤2：在main.ts中动态引导组件 #

在应用入口文件main.ts里，先读取LocalStorage的标识，再动态挂载对应的组件：

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ApplicationRef } from '@angular/core';
import { AppModule } from './app/app.module';
import { FirstComponent } from './app/first.component';
import { SecondComponent } from './app/second.component';

// 读取LocalStorage中存储的目标组件标识
const targetKey = localStorage.getItem('targetComponent');

// 建立组件映射关系
const componentMap = new Map([
  ['first', FirstComponent],
  ['second', SecondComponent]
]);

// 确定要启动的组件，默认回退到FirstComponent
const targetComponent = componentMap.get(targetKey) || FirstComponent;

// 启动模块并动态挂载组件
platformBrowserDynamic().bootstrapModule(AppModule)
  .then(moduleRef => {
    const appRef = moduleRef.injector.get(ApplicationRef);
    // 获取根节点（对应index.html里的<app-root>或你指定的根元素）
    const rootElement = document.querySelector('app-root') || document.body;
    // 清空根节点内容
    rootElement.innerHTML = '';
    // 创建并挂载目标组件
    const factory = moduleRef.componentFactoryResolver.resolveComponentFactory(targetComponent);
    factory.create(moduleRef.injector, [], rootElement);
  })
  .catch(err => console.error(err));

补充说明 #

• 确保在index.html执行前，已经通过脚本把targetComponent写入LocalStorage，比如：

  <!-- index.html 头部脚本 -->
  <script>
    localStorage.setItem('targetComponent', 'first'); // 或'second'
  </script>
  

• Angular 9及以上版本启用了Ivy编译器，entryComponents可以省略，框架会自动识别动态组件。

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