Angular Material Platform模块检测Edge浏览器失效问题咨询

问题原因 #

你遇到的是@angular/cdk v12版本的历史适配问题：Edge 79及之后的版本已全面切换为Chromium内核，而v12.2.7版本的Platform模块中，EDGE属性的判断逻辑仅适配了旧版EdgeHTML内核的Edge浏览器，无法识别新版Chromium内核Edge，会将其判定为Chrome，因此返回值始终为false。

解决方案 #

方案1：升级依赖版本

@angular/cdk从v13版本开始已经新增了对新版Chromium内核Edge的识别支持，将项目中的Angular CDK依赖升级到v13及以上版本，原有代码this.platformService.EDGE即可正常返回正确结果。

方案2：手动兼容判断

如果项目受限于兼容性要求无法升级CDK版本，可以自行补充对新版Edge的识别逻辑：

import { Platform } from '@angular/cdk/platform';
import { Component } from '@angular/core';

@Component({
    ...
})
export class AppComponent {
    isEdge: boolean;
    constructor(private platformService: Platform) {
        // 补充识别Chromium内核新版Edge
        const isChromiumEdge = /Edg\/\d+/.test(navigator.userAgent);
        this.isEdge = this.platformService.EDGE || isChromiumEdge;
    }
}

新版Chromium内核Edge的UserAgent标识中带有Edg/前缀，区别于旧版EdgeHTML内核的Edge/前缀，补充以上正则判断即可覆盖所有Edge版本的识别需求。

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