Angular 13升级至14版本路由配置报错修复方法
错误原因
Angular 14 版本强化了路由配置的合法性校验:无组件路由(即未配置component/children/loadChildren的路由)不允许设置命名出口(named outlet)。
你当前配置中path: ''的重定向路由属于典型的无组件路由,旧版本Angular对这类配置的校验逻辑较宽松不会抛出异常,升级到v14后就会触发你看到的报错。
修复方法
纯重定向路由本身不需要绑定outlet属性,路由解析时会自动根据重定向目标的配置匹配对应的命名出口,直接删除重定向规则上的outlet: 'alarms'配置即可:
path: 'operator', component: HomeViewComponent, children: [ { path: '', redirectTo: 'list/', pathMatch: 'full' }, { path: 'list/:key', component: AlarmsListComponent, outlet: 'alarms' }, { path: 'details/:keyType/:keyValue', component: AlarmDetailsComponent, outlet: 'alarms' } ]
补充说明:如果遇到需要跨命名出口重定向的特殊场景,不要在重定向路由本身配置
outlet,而是将重定向目标写为包含出口映射的对象格式,例如redirectTo: { outlets: { 'alarms': ['list/'] } },即可符合v14的路由校验规则。
内容的提问来源于stack exchange,提问作者eladr
相关产品推荐
相关产品推荐

