Angular 19 Office-Js Excel插件displayDialogAsync触发zone.js错误求助

1. 调整模态框页面的Office.js初始化逻辑 #

模态对话框属于独立浏览器上下文，无需重复加载office.js。在模态框组件中先判断Office对象是否已存在，避免重复初始化：

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

declare const Office: any;

@Component({
  selector: 'app-modal-test',
  templateUrl: './modal-test.component.html',
  styleUrls: ['./modal-test.component.css']
})
export class ModalTestComponent implements OnInit {

  ngOnInit(): void {
    if (typeof Office !== 'undefined') {
      this.initModal();
      return;
    }
    // 仅在Office未初始化时执行初始化逻辑
    Office.initialize = () => this.initModal();
  }

  private initModal(): void {
    // 模态框业务逻辑，比如与任务窗格通信
  }
}

2. 用NgZone隔离Office API调用 #

Zone.js会拦截异步操作，可能干扰Office.js内部机制。在打开模态框时脱离Angular Zone执行Office API：

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

declare const Office: any;

@Component({
  selector: 'app-task-pane',
  templateUrl: './task-pane.component.html',
  styleUrls: ['./task-pane.component.css']
})
export class TaskPaneComponent {

  constructor(private ngZone: NgZone) {}

  openModal(): void {
    this.ngZone.runOutsideAngular(() => {
      Office.context.ui.displayDialogAsync(
        `${window.location.origin}/modaltest`,
        { height: 50, width: 50 },
        (result) => {
          // 回调逻辑需触发Angular变更检测时，切回Zone内执行
          this.ngZone.run(() => {
            if (result.status === Office.AsyncResultStatus.Succeeded) {
              // 处理成功逻辑
            }
          });
        }
      );
    });
  }
}

3. 修改Zone.js配置排除Office相关操作 #

在polyfills.ts中配置Zone.js不拦截Office相关的异步事件，避免冲突：

// polyfills.ts
import 'zone.js';

// 排除Office相关事件的Zone.js拦截
(window as any).__Zone_symbol__UNPATCHED_EVENTS = ['message', 'officeReady'];
// 禁用对对象属性的拦截，避免干扰Office API内部逻辑
(window as any).__Zone_disable_on_property = true;

4. 优化路由与页面加载配置 #

• 确保模态框路由无重定向或调试模式干扰：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TaskPaneComponent } from './task-pane/task-pane.component';
import { ModalTestComponent } from './modal-test/modal-test.component';

const routes: Routes = [
  { path: '', component: TaskPaneComponent },
  { path: 'modaltest', component: ModalTestComponent }
];

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

• 仅在主页面（index.html）保留office.js引用和缓存恢复脚本，模态框页面不要重复添加：

<!-- index.html 中仅保留以下Office相关脚本 -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script>
  (function () {
    const historySupported = 'history' in window && 'pushState' in history;
    if (historySupported) {
      const originalReplaceState = history.replaceState;
      history.replaceState = function (state) {
        if (state) {
          state = JSON.parse(JSON.stringify(state));
          state.OfficeAddin = true;
        }
        return originalReplaceState.apply(history, arguments);
      };
    }
  })();
</script>

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