Angular如何在新浏览器窗口加载组件并正常显示内容？

在Angular开发中，点击按钮打开新窗口想显示NewWindowComponent，但新窗口无法识别Angular应用组件，出现组件不被识别的报错。

现有代码 #

new-window.component.ts #

@Component({
  selector: 'app-new-window',
  template: `
    <h1>New Window Component</h1>
  `,
})
export class NewWindowComponent {
  // component logic
}

open-window.component.ts #

@Component({
  selector: 'app-open-window',
  template: `
    <button (click)="openNewWindow()">Open New Window</button>
  `,
})
export class OpenWindowComponent {
 private newWindow: Window | null = null;

  openNewWindow() {
    // Open a new browser window
    this.newWindow = window.open('', '_blank');

    if (this.newWindow) {
      this.newWindow.document.open();
      this.newWindow.document.write('<app-root></app-root>');
      this.newWindow.document.close();
    }
  }

  ngOnDestroy() {
    // Close the new window when the component is destroyed
    if (this.newWindow) {
      this.newWindow.close();
    }
  }
}

解决方法 #

直接写入<app-root>到新窗口的方式无效，因为新窗口未加载Angular运行时环境，也没有正确引导组件。以下是两种可行方案：

方案一：动态创建组件（轻量场景） #

1. 确保NewWindowComponent在模块中正确声明：

@NgModule({
  declarations: [NewWindowComponent, OpenWindowComponent],
  entryComponents: [NewWindowComponent] // Angular 9+ 可选，显式声明更稳妥
})
export class AppModule {}

2. 修改OpenWindowComponent的打开逻辑，动态挂载组件：

import { ComponentFactoryResolver, Injector } from '@angular/core';
import { NewWindowComponent } from './new-window.component';

@Component({
  selector: 'app-open-window',
  template: `
    <button (click)="openNewWindow()">Open New Window</button>
  `,
})
export class OpenWindowComponent {
  private newWindow: Window | null = null;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private injector: Injector
  ) {}

  openNewWindow() {
    this.newWindow = window.open('', '_blank', 'width=600,height=400');
    if (!this.newWindow) return;

    // 复制当前应用的样式和运行时资源到新窗口
    this.newWindow.document.head.innerHTML = document.head.innerHTML;

    // 创建组件宿主元素并添加到新窗口
    const componentHost = document.createElement('app-new-window');
    this.newWindow.document.body.appendChild(componentHost);

    // 动态创建并挂载组件
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(NewWindowComponent);
    const componentRef = componentFactory.create(this.injector, [], componentHost);
    componentRef.changeDetectorRef.detectChanges();

    // 监听窗口关闭，销毁组件
    this.newWindow.addEventListener('beforeunload', () => {
      componentRef.destroy();
      this.newWindow = null;
    });
  }

  ngOnDestroy() {
    this.newWindow?.close();
  }
}

方案二：路由跳转（复杂场景） #

如果组件需要路由支持或依赖其他Angular服务，推荐用路由方式：

1. 给NewWindowComponent配置路由：

const routes: Routes = [
  // 其他路由配置
  { path: 'new-window', component: NewWindowComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

2. 修改打开窗口的方法，直接跳转路由URL：

openNewWindow() {
  const baseUrl = window.location.origin;
  this.newWindow = window.open(`${baseUrl}/new-window`, '_blank', 'width=600,height=400');
}

这种方式让新窗口完整加载Angular应用，自动处理组件的依赖和生命周期，适合大多数场景。

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