Angular为何从node_modules目录抛出报错？ng serve运行异常及浏览器无法访问问题求助

你遇到的核心问题大概率是RxJS版本与Angular版本不兼容导致的类型编译错误，进而引发构建不完全，最终浏览器无法正常加载页面。以下是具体的解决步骤：

1. 先确认版本匹配问题 #

首先检查当前项目中RxJS和Angular核心包的版本，排查兼容性：

npm list rxjs
npm list @angular/core

Angular和RxJS有明确的版本对应关系，举几个常见匹配：

• Angular 10/11 对应 RxJS 6.x
• Angular 12+ 对应 RxJS 6.6.x 或 7.x
• Angular 14+ 对应 RxJS 7.x 或 8.x
  如果两者版本不匹配，这就是报错的根源。

2. 安装兼容的RxJS版本 #

根据你的Angular版本，安装对应的RxJS版本。比如你使用的是Angular 11，执行：

npm install rxjs@6.6.7 --save

安装完成后，重新运行ng serve，观察编译错误是否消失。

3. 处理严格类型检查报错（可选） #

如果版本匹配后仍有类似Type 'null' is not assignable to type的错误，可以临时调整tsconfig.json的类型检查规则：
找到strictNullChecks选项，设置为false：

{
  "compilerOptions": {
    // ...其他配置项
    "strictNullChecks": false
  }
}

注意这只是临时 workaround，优先推荐通过版本匹配解决问题。

4. 修复页面Cannot GET /问题 #

当编译错误解决后，如果页面仍显示该提示，检查路由配置：
确保app-routing.module.ts中有默认路由重定向，比如：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent }
];

这样访问根路径时会自动跳转到指定组件页面。

补充：你之前删除node_modules重装的思路是对的，但如果依赖版本本身不兼容，重装也无法解决问题，所以核心还是要搞定版本匹配。

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