Angular 13导入@angular/flex-layout报TS2307找不到模块如何解决

• 核心诱因是依赖版本完全不兼容：你安装的@angular/flex-layout@12.0.0-beta.38 peer依赖明确要求Angular版本为12.x，和你当前用的Angular 13.0.1存在大版本断层。如果安装时加了--force或--legacy-peer-deps跳过了依赖校验，会直接把不兼容的包硬装进项目，TypeScript无法识别该版本包的模块入口，就会抛出TS2307报错。
• 编辑器给出的“最新可选版本”智能提示不准，是本地npm包索引缓存过期导致的，该提示仅同步npm源上的版本列表，不会判断和当前项目Angular版本的兼容性。
• 小概率场景是安装依赖后未重启TypeScript服务，TS没有重新索引新安装的包，导致偶发模块找不到的误报。

• 第一步：卸载现有不兼容版本
  项目根目录执行对应包管理器的卸载命令：

  # npm用户执行
  npm uninstall @angular/flex-layout
  
  # yarn用户执行
  yarn remove @angular/flex-layout
  

• 第二步：安装适配Angular 13的对应版本
  Angular 13 对应的官方兼容flex-layout版本为13.0.0-beta.38，执行安装命令：

  # npm用户执行
  npm install @angular/flex-layout@13.0.0-beta.38
  
  # yarn用户执行
  yarn add @angular/flex-layout@13.0.0-beta.38
  

  安装时不要加--force/--legacy-peer-deps参数，如果出现peer依赖报错，先确认自己装的版本号是13开头的beta.38，不要装12或14开头的版本。
• 第三步：刷新依赖索引
  1. 打开IDE命令面板，执行「TypeScript: 重启TS服务」操作，或者直接重启IDE，让TS重新扫描node_modules里的依赖。
  2. 如果重启后还是报错，删除项目根目录下的node_modules文件夹、锁文件（package-lock.json或yarn.lock），重新执行npm install/yarn重建完整依赖树即可。
• 第四步：验证模块导入
  回到app.module.ts文件，正常写入导入和模块注册代码即可：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FlexLayoutModule } from '@angular/flex-layout';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      FlexLayoutModule // 注册模块
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

补充排查项：如果上述操作全部完成后仍报错，打开根目录tsconfig.json检查compilerOptions.moduleResolution配置，确保值为node，Angular 13配套的TypeScript版本不支持node16/nodenext/bundler这类高版本解析规则，手动修改后会导致模块解析失败。

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