Angular 17在iOS 15.2及更早版本中嵌套路由Outlet失效问题

问题根源 #

iOS 15.2及更早版本的Safari/WebKit未支持ES2022的Array.prototype.at()方法，而Angular 17的路由模块（@angular/router）中使用了commands.at(-1)处理嵌套Outlet路由，直接触发了NG04004错误。iOS 15.4开始完善对该ES特性的支持，因此高版本无此问题。

可行解决方法 #

1. 添加数组at()方法的Polyfill #

在项目入口文件（如main.ts）中补充Polyfill代码，填补低版本iOS的API缺失：

// 为低版本浏览器补全Array.prototype.at
if (!Array.prototype.at) {
  Array.prototype.at = function(index: number) {
    index = Math.trunc(index) || 0;
    if (index < 0) index += this.length;
    if (index < 0 || index >= this.length) return undefined;
    return this[index];
  };
}

也可使用core-js提供的标准化Polyfill：

• 安装依赖：npm install core-js
• 在main.ts中导入：import 'core-js/es/array/at';

2. 调整嵌套路由的写法 #

避免使用/(modal:signin)这种简写格式，改用路由命令的数组写法，绕开依赖at(-1)的逻辑分支：

• 模板中使用routerLink：

[routerLink]="['/', { outlets: { modal: 'signin' } }]"

• 组件中使用Router.navigate：

this.router.navigate(['/', { outlets: { modal: 'signin' } }]);

3. 降级Angular路由版本（不推荐） #

如果上述方法无效，可临时降级@angular/router至16.x版本（需确保与Angular 17核心包的兼容性），Angular 16的路由逻辑未使用Array.prototype.at()方法。

其他用户反馈 #

已有不少开发者在Angular 17 + iOS 15.x环境下遇到相同问题，核心原因均为WebKit对ES2022特性支持不全，添加Polyfill是最普遍且有效的解决方式。

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