Angular named router outlet无法匹配路由问题怎么解决？

已知错误点 #

• 命名路由插座属性拼写错误：模板中<router-outlet>的name属性被误写为namme，导致Angular无法识别名为details的路由插座，路由匹配时会默认尝试匹配主插座，触发匹配失败错误。
• 路由配置语法错误：第一条路由规则末尾缺少闭合花括号}，会导致路由解析器无法正确读取后续的details插座路由规则。
• （可选，针对懒加载场景）若当前路由配置属于懒加载子模块，跳转路由未携带懒加载模块对应的路径前缀也会触发匹配失败。

修复代码 #

修复路由配置 #

const routes: Routes = [
    // 补全花括号闭合
    { path: '', component: BooksComponent, resolve: {books: BooksResolver} },
    { path: ':id', component: BookDetailsComponent, resolve: { book: BookResolver}, outlet: "details"},
];

修复模板路由插座 #

<router-outlet></router-outlet>     
<!-- 修正name属性拼写 -->
<router-outlet name="details"></router-outlet>

懒加载适配（按需修改） #

如果当前路由所属模块为懒加载模块，且在根路由中配置的懒加载前缀为books，需要修改routerLink写法：

[routerLink]="['/books', { outlets: { details: [book.id] } }]"

验证步骤 #

修复完成后重启本地开发服务清除缓存，点击图书条目即可在details命名路由插座中加载对应的图书详情组件。

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