角度路由在Chrome iOS中不起作用，但在Chrome Mac中运行良好

Question

真是个奇怪的问题。我的路由配置得很好，并且检查了足够多次。

然而，page1, page3和page5工作良好。而且page2, page4, page6不要重定向到自己。

如果我点击重定向按钮，然后转到登陆页，而不是page2。如果我写https://example.com/page2 ->相同的:https://example.com，没有内容

查看这里的路由

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}
];

和不加载的组件。

@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 {
}
}

要点!!Chrome (MacOS)没有问题，即使是尺寸"iPhone"。一切正常

但是Chrome (iOS)存在问题，正如我上面所描述的。

任何想法?

Answer 1

我终于找到了答案。

日志在这里:

LOGResolveEnd(id: 4, url: '/page2', urlAfterRedirects: '/page2', state: Route(url:'', path:'') { Route(url:'page2', path:'page2') } )
LOGNavigationError(id: 4, url: '/page2', error: Error: The animation trigger "animation1" has failed to build due to the following errors:
The provided animation property "backface-visibility" is not a supported CSS property for animations)
ERRORERROR Error: Uncaught (in promise): Error: The animation trigger "animation1" has failed to build due to the following errors:
The provided animation property "backface-visibility" is not a supported CSS property for animations

"bv"属性不支持Chrome (iOS)。而这样的行为是由于动画错误。

如果你知道如何在Chrome (iOS)中调试路由，这是一个容易的问题。两个简单的步骤:

1. 把这个构造函数添加到AppModule。

export class AppModule {
constructor(private readonly router: Router) {
router.events
.subscribe(console.log)
}
}

2. chrome://inspect-这样你就可以访问Chrome (iOS)日志。

都可以很好地使用不同的动画选项。注意动画库，使用不同的设备可能会导致错误。将其包含在测试管道中是一个好主意。

Answer 2

你的错误可能是因为Chrome在iOS上使用WebKIT作为浏览器引擎。

检查你的东西是否也能在Safari上工作。这个限制来自于apple，它不允许除了Webkit之外的任何其他浏览器实现