Angular路由在iOS端Chrome失效 Mac端Chrome正常问题求助

• Angular路由配置经多轮核查无语法错误，其中page1、page3、page5的路由跳转、直接访问均正常
• page2、page4、page6存在路由异常：点击跳转按钮不会进入对应页面，直接跳转到根路径落地页；直接访问对应页面地址也会自动跳转到根域名，同时伴随页面内容缺失
• 异常仅在iOS端Chrome浏览器出现，MacOS端Chrome切换为iPhone尺寸调试模式时，所有路由功能均正常，无法复现问题

问题相关代码 #

路由配置：

const routes: Routes = [
  { path: '', component: LandingComponent},
  { path: 'page1', component: Page1Component},
  { path: 'page2', component: Page2Component},
  { path: 'page3', component: Page3Component},
  { path: 'page4', component: Page4Component},
  { path: 'page5', component: Page5Component},
  { path: 'page6', component: Page6Component},
  { path: '**', component: NotFound404Component}
];

异常页面page2的组件代码：

@Component({
  selector: 'app-page2',
  templateUrl: './page2.component.html',
  styleUrls: ['./page2.component.scss'],
  animations: [
    trigger('animation1', [
      transition('void => *', useAnimation(flip))
    ]),
    trigger('animation2', [
      transition('void => *', useAnimation(bounceInDown), {
        params: { timing: 3}
      })
    ])
  ]
})
export class Page2Component implements OnInit {
  constructor(public some: SomeService) { }
  ngOnInit(): void {}
}

iOS端所有第三方浏览器（含Chrome、Firefox等）均强制使用系统内置WebKit内核，与Mac端Chrome使用的Blink内核存在API实现差异；桌面端Chrome的移动端调试模式仅仅修改视口尺寸、UA等参数，不会切换渲染内核，因此无法复现WebKit专属异常。
结合代码特征可定位问题触发点：

1. 正常页面与异常页面的核心差异为：异常的page2、page4、page6均配置了带参数的入场动画，正常页面未使用同类动画配置
2. 动画参数params: { timing: 3}传值不符合WebKit内核的CSS规范：WebKit严格要求<time>类型属性值必须携带合法时间单位（s/ms），无单位的非0时间值会被判定为无效值，直接抛出动画解析错误
3. 组件初始化阶段动画解析失败会中断组件渲染流程，触发路由模块自带的异常兜底逻辑，最终跳转回根路径落地页，同时出现内容缺失问题

• 连接iOS真机开启Safari远程调试，访问异常页面时查看控制台日志，可看到明确的CSS动画解析报错
• 临时注释异常页面的animations配置项，重新部署后验证iOS端路由是否恢复正常，确认动画为问题触发源
• 核查page4、page6的组件代码，确认是否存在与page2一致的动画参数传值错误

1. 修正动画参数传值格式，使用WebKit兼容的合法时间格式，两种写法均可：

// 写法1：带单位的字符串格式，代表动画时长3秒
params: { timing: '3s' }
// 写法2：数字类型的毫秒值，Angular会自动补全单位做兼容处理
params: { timing: 3000 }

2. 补充根路由的pathMatch配置，避免前缀匹配规则导致的非预期跳转：

{ path: '', component: LandingComponent, pathMatch: 'full' }

3. 增加路由全局错误监听，出现组件加载异常时打印日志，避免无感知跳转根路径的问题：

import { Router } from '@angular/router';

export class AppComponent {
  constructor(private router: Router) {
    this.router.errorHandler = (error) => {
      console.error('路由加载异常：', error);
    }
  }
}

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