Angular运行报错仅在控制台显示 无法在页面屏幕展示如何解决

该问题不是项目配置不当导致的。
你使用的Angular 12.2.2版本，原生全局错误处理器默认仅会将错误输出到浏览器控制台，不会自动在页面渲染错误覆盖层。你参考的全屏错误展示效果是Angular 14及以上版本才内置的开发模式特性，低版本默认不提供。
你贴出的几个@angular-devkit相关依赖版本和Angular 12主版本匹配，不存在版本冲突或配置错误问题。

要让运行时报错直接在页面以HTML形式渲染展示，自定义全局错误处理器即可，步骤如下：

• 新建全局错误处理类文件global-error-handler.ts，代码如下：

import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  handleError(error: unknown): void {
    // 保留原有控制台错误打印逻辑
    console.error(error);
    // 渲染全屏错误覆盖层
    this.renderErrorOverlay(error);
  }

  private renderErrorOverlay(error: unknown) {
    // 移除重复的错误层
    const oldOverlay = document.getElementById('ng-error-overlay');
    if (oldOverlay) oldOverlay.remove();

    // 创建覆盖层DOM
    const overlay = document.createElement('div');
    overlay.id = 'ng-error-overlay';
    // 配置覆盖层样式
    overlay.style.cssText = `
      position: fixed;
      inset: 0;
      z-index: 999999;
      background: #ffffff;
      padding: 2rem;
      overflow: auto;
      font-family: Consolas, Monaco, monospace;
      color: #d32f2f;
      font-size: 14px;
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-word;
    `;
    // 写入错误内容，自动转义避免XSS风险
    const err = error as Error;
    overlay.textContent = `运行时错误捕获：
${err?.message || String(error)}

错误调用栈：
${err?.stack || '无可用栈信息'}
`;
    document.body.appendChild(overlay);
  }
}

• 在根模块app.module.ts中注册自定义错误处理器，替换Angular默认实现：

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// 引入上一步写的错误处理类
import { CustomErrorHandler } from './global-error-handler';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    // 替换默认错误处理器
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 该自定义错误层建议仅在开发环境启用，生产环境需移除，避免泄露源码栈等敏感信息
• 如果不想手动实现错误层，也可以直接将Angular项目升级到14及以上版本，开发模式下默认自带和参考效果一致的错误全屏覆盖功能
• 错误内容渲染使用textContent而非innerHTML，可以自动对特殊字符做转义，避免恶意脚本注入风险

内容的提问来源于stack exchange，提问作者Alex Alan Nunes