哪个@angular/*包是bug的来源？
router
这是个回归吗？
否
问题描述
你好，
我注意到Angular路由器有一个问题。如果你输入一个错误的URL,比如'www.example.com///test',那么这个异常就会被抛出：
我准备了一个示例仓库(不要让仓库的名字让你困惑，我以前用它解决过其他问题)。在路由模块中有一个简单的通配符路由，它应该将所有错误的/破碎的URL路由到'TestComponent'。但是当你输入' http://localhost:4200///test '时，页面崩溃，上面提到的异常就被抛出了。请注意，如果你使用两个或四个斜杠，这个异常就不会被抛出。必须恰好有三个斜杠。
请提供一个链接，指向最小复现bug的方法
https://github.com/Floscho2402/angular-working-anchor-links
请提供你看到的异常或错误信息
ERROR Error: Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://test/' cannot be created in a document with origin 'http://localhost:4200' and URL 'http://localhost:4200///test'.
Error: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://test/' cannot be created in a document with origin 'http://localhost:4200' and URL 'http://localhost:4200///test'.
at BrowserPlatformLocation.replaceState (common.mjs:171:27)
at PathLocationStrategy.replaceState (common.mjs:406:32)
at Location.replaceState (common.mjs:676:32)
at Router.setBrowserUrl (router.mjs:5630:27)
at Object.next (router.mjs:4747:32)
at source.subscribe.isUnsub (tap.js:17:81)
at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
at OperatorSubscriber.next (Subscriber.js:31:18)
at map.js:7:24
at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
at resolvePromise (zone.js:1214:31)
at resolvePromise (zone.js:1168:17)
at zone.js:1281:17
at _ZoneDelegate.invokeTask (zone.js:409:31)
at core.mjs:25299:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25299:36)
at _ZoneDelegate.invokeTask (zone.js:408:60)
at Object.onInvokeTask (core.mjs:25607:33)
at _ZoneDelegate.invokeTask (zone.js:408:60)
at Zone.runTask (zone.js:178:47)
handleError @ core.mjs:9095
next @ core.mjs:26304
next @ Subscriber.js:91
_next @ Subscriber.js:60
next @ Subscriber.js:31
(anonym) @ Subject.js:34
errorContext @ errorContext.js:19
next @ Subject.js:27
emit @ core.mjs:22117
(anonym) @ core.mjs:25646
invoke @ zone.js:375
run @ zone.js:134
runOutsideAngular @ core.mjs:25519
onHandleError @ core.mjs:25646
handleError @ zone.js:379
runGuarded @ zone.js:147
api.microtaskDrainDone @ zone.js:1075
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
nativeScheduleMicroTask @ zone.js:564
scheduleMicroTask @ zone.js:575
scheduleTask @ zone.js:399
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1268
then @ zone.js:1464
bootstrapModule @ core.mjs:26344
4431 @ main.ts:6
__webpack_require__ @ bootstrap:19
__webpack_exec__ @ main.ts:7
(anonym) @ main.ts:7
__webpack_require__.O @ chunk loaded:23
(anonym) @ main.ts:7
webpackJsonpCallback @ jsonp chunk loading:34
(anonym) @ main.js:2
16 weitere Frames anzeigen请提供你在哪个环境中发现这个问题的(运行 ng version )
Angular CLI: 15.0.4
Node: 16.13.0
Package Manager: npm 8.1.0
OS: darwin x64
Angular: 15.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1500.4
@angular-devkit/build-angular 15.0.4
@angular-devkit/core 15.0.4
@angular-devkit/schematics 15.0.4
@schematics/angular 15.0.4
rxjs 7.5.7
typescript 4.8.4还有其他需要说明的吗？
- 无响应*
3条答案
按热度按时间ctehm74n1#
感谢Floscho2402的报告。这是预期的浏览器行为。SPA路由器使用
pushState和replaceState进行导航，而不会导致全页刷新。我们不会采取任何措施来绕过浏览器的安全例外。如果你愿意，你可以使用另一种位置策略，如HashLocationStrategy。eit6fx6z2#
@atscott 感谢您的快速回答。所以我需要找到一个自定义解决方案来捕获这个错误。最好的方法是捕获这个异常吗？在app-component中监听路由器事件？
wfauudbj3#
@Floscho2402Ah,这实际上是 #32853 的重复。#32853(评论)有一个使用自定义序列化器的解决方法。您也可以像您提到的那样订阅
Router事件并导航到错误页面。再次编辑：这似乎完全是一个与上面链接的问题无关的问题。因为没有
base并且相对URL以//开头，因此产生的replaceState调用将尝试导航到https://test。这可以在LocationStrategy中解决。重新打开低优先级，作为解决方法，可以使用自定义位置策略为这种情况添加原始内容。