Angular 代码输入组件抛出“ERROR ReferenceError：文档未定义”

Question

我正在使用以下库角度代码输入 。但是，在加载使用 Angular 代码输入组件的组件时，我遇到了错误。收到的错误消息是：“

- Changes detected. Rebuilding...
ERROR ReferenceError: document is not defined
    at _CodeInputComponent.focusOnInputAfterAppearing (c:/Users/X/Documents/sourcecode/web/node_modules/angular-code-input/fesm2022/angular-code-input.mjs:300:52)
    at _CodeInputComponent.ngAfterViewChecked (c:/Users/X/Documents/sourcecode/web/node_modules/angular-code-input/fesm2022/angular-code-input.mjs:103:10)
    at callHookInternal (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6117:14)
    at callHook (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6148:9)
    at callHooks (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6099:17)
    at executeInitAndCheckHooks (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6049:9)
    at refreshView (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12171:21)
    at detectChangesInView (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12324:9)
    at detectChangesInViewIfAttached (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12287:5)
    at detectChangesInEmbeddedViews (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12244:13)
ERROR ReferenceError: document is not defined
    at _CodeInputComponent.focusOnInputAfterAppearing (c:/Users/X/Documents/sourcecode/web/node_modules/angular-code-input/fesm2022/angular-code-input.mjs:300:52)
    at _CodeInputComponent.ngAfterViewChecked (c:/Users/X/Documents/sourcecode/web/node_modules/angular-code-input/fesm2022/angular-code-input.mjs:103:10)
    at callHookInternal (c:/Users/X/Documents/sourcecode/web2/node_modules/@angular/core/fesm2022/core.mjs:6117:14)
    at callHook (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6148:9)
    at callHooks (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6099:17)
    at executeInitAndCheckHooks (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6049:9)
    at refreshView (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12171:21)
    at detectChangesInView (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12324:9)
    at detectChangesInViewIfAttached (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12287:5)

详情：

该错误源自 Angular 代码输入组件，似乎与文档的使用有关，当导航到具有使用 Angular 代码输入组件的组件的路由时，该文档不可用。

重现步骤：

• 启动 Angular 项目。
• 导航到包含使用 Angular 代码输入组件的组件的路径。组件加载，但终端显示错误日志。

预期行为： 导航后组件加载成功，没有任何错误。

环境：

• 角度版本：17.1.0
• 操作系统：Windows
• Node.js 版本：v18.19.1
• npm：10.2.4

Answer 1

这是因为 Angular-code-input 库内部可能使用窗口的文档对象，而该对象在服务器端不可用。

您需要添加对浏览器的检查。 像这样的东西，

export class AppService {

constructor(@Inject(PLATFORM_ID) platformId: Object) {
    this.isBrowser = isPlatformBrowser(platformId);
    this.isServer = isPlatformServer(platformId);
  }
}
<div class="customNavTabs">
   @if (appService.isBrowser) {
     <code-input [isCodeHidden]="true"
              [codeLength]="5"
              (codeChanged)="onCodeChanged($event)"
              (codeCompleted)="onCodeCompleted($event)">
     </code-input>
   }
</div>