🐞 bug报告
受影响的软件包
这个问题是由@angular/router或其他Angular核心软件包引起的。
是否为回归?
是的,在出现此bug之前的版本是:Angular 4.x
描述
我们有一个混合应用(AngularJS和Angular7),其中包含AngularJS和Angular7路由器的混合。当我们尝试在Angular7中使用href切换路由(组件)时,只有每隔一个路由才能正常路由,这意味着中间的一个总是被跳过。
这个问题仅在Firefox和Safari中存在,而不是Chrome中。
🔬 最小复现
原始代码可以正常工作的来源是Manfred Steyer:https://github.com/manfredsteyer/ngUpgrade-without-preparation。这段代码使用的是Angular 4.x。
您可以在仓库中找到从Angular 4.x升级到Angular 7.x的升级后的代码,该代码描述了问题:https://github.com/dorje42/ngUpgrade-without-preparation
这是一个混合应用,具有AngularJS和Angular7路由器。使用routerLink在Angular7路由之间进行路由是正常的。但是使用href在Angular7路由之间进行路由时,只有每隔一个路由才能正常路由,这意味着中间的一个总是被跳过。
在标准的Angular7应用程序中使用href进行路由是正常的:https://stackblitz.com/edit/angular-puqxtw?file=src%2Fapp%2Fapp.component.html
必须是混合应用配置有问题。
打开 http://localhost:4200/
1.
click ng2-route (href), it will go to http://localhost:4200/#/ng2-route
click ng7-route (href), nothing happens
click ng8-route (href), it will go to http://localhost:4200/#/ng8-route
click ng2-route (href), nothing happens
click ng7-route (href), it will go to http://localhost:4200/#/ng7-route
🌍 您的环境
Angular版本:
Angular CLI: 7.3.4
Node: 8.11.3
OS: linux x64
Angular: 7.2.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, upgrade
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.13.4
@angular-devkit/build-angular 0.13.4
@angular-devkit/build-optimizer 0.13.4
@angular-devkit/build-webpack 0.13.4
@angular-devkit/core 7.3.4
@angular-devkit/schematics 7.3.4
@angular/cli 7.3.4
@ngtools/webpack 7.3.4
@schematics/angular 7.3.4
@schematics/update 0.13.4
rxjs 6.4.0
typescript 3.2.4
webpack 4.29.0
其他相关信息?
这个问题仅在Firefox和Safari中存在,而不是Chrome中。
4条答案
按热度按时间1cosmwyk1#
问题仍然出现在Angular 8 beta 7中。
chhqkbe12#
经过进一步的研究,我发现这与路由器更改导航有关。如果将超时时间设置大于0,则可以修复此错误。
setTimeout( () => { this.scheduleNavigation(rawUrlTree, source, state, {replaceUrl: true}); }, 1);
也许在Observable中使用setTimeout并不是最佳方法。
7lrncoxx3#
我将示例应用程序升级到v10,所有路由似乎都能正常工作,无论是在
routerLink
还是在href
上。https://github.com/atscott/ngUpgrade-without-preparation-master
如果您的应用程序在升级后仍然存在问题,请open a new issue并遵循问题模板中的说明。
isr3a4wc4#
重新开放 -我在safari中测试过,这是有效的,但我可以确认这在firefox中仍然无法工作。