Angular13配置路由后提示Cannot resolve symbol 'router-outlet'如何解决

核心原因 #

你提供的路由配置代码本身没有语法错误，报错完全是IDEA编辑器的识别问题，和业务代码无关，常见诱因如下：

• IDE当前项目的缓存文件损坏，没有正确索引到AppRoutingModule导出的RouterModule
• 项目node_modules中的@angular/router依赖索引未被IDE正常加载
• IDE的Angular语言服务未正常启动，无法识别Angular内置路由指令

解决方案 #

按优先级依次尝试以下操作即可：

• 先验证代码可用性：执行ng serve启动项目，确认页面可以正常加载HomePageComponent，排除代码本身的逻辑错误
• 清理IDE缓存重启：打开IDEA顶部菜单File > Invalidate Caches...，勾选Clear file system cache and local history后点击Invalidate and Restart，等待IDE重启完成重新索引项目即可解决绝大多数识别问题
• 重新安装依赖：删除项目根目录的node_modules文件夹、package-lock.json/yarn.lock文件，执行npm install重装所有依赖后重启IDE
• 确认Angular语言服务开启：打开IDEA设置Settings > Languages & Frameworks > Angular，勾选Enable Angular language service选项，重启IDE生效
• 临时触发IDE识别：如果上述操作都无效，可在app.module.ts中临时直接引入RouterModule，代码如下：

// app.module.ts 顶部新增导入
import { RouterModule } from '@angular/router';

// 在imports数组中新增RouterModule项
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    RouterModule // 仅用于触发IDE识别，后续可删除
  ],
  // 其余配置保持不变
})

待IDE可以正常识别router-outlet后，即可删除新增的这行代码，不影响项目运行。

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