Angular项目依赖冲突与编译运行报错问题求助

首先明确：ng serve必须在前端Angular项目根目录运行 #

不要在后端目录（比如你提到的kindyportalBackend）执行，切换到你的Angular前端项目根目录再运行命令。

1. 修复ERESOLVE依赖冲突（避免用--force安装） #

--force会强制安装不兼容依赖，是后续错误的根源，按以下步骤彻底解决：

• 删除项目根目录下的node_modules文件夹、package-lock.json（npm用户）或yarn.lock（yarn用户）
• 清理npm缓存：npm cache clean --force
• 确保所有@angular/*包版本统一，比如使用Angular 16，执行：

  npm install @angular/core@16 @angular/cli@16 @angular/common@16 @angular/compiler@16 @angular/platform-browser@16 @angular/platform-browser-dynamic@16 --save
  

• 最后执行npm install重新安装依赖

2. 解决tsconfig.app.json缺失问题 #

这是Angular CLI生成的标准配置文件，不要手动随意添加，按以下方式修复：

• 执行Angular CLI更新命令修复配置：ng update @angular/cli --force（仅用于修复CLI配置，非依赖安装）
• 如果上述命令无效，从同版本的全新Angular项目中复制src/tsconfig.app.json文件到你的项目src目录下，标准内容示例：

  {
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "outDir": "../out-tsc/app",
      "types": []
    },
    "files": [
      "main.ts",
      "polyfills.ts"
    ],
    "include": [
      "src/**/*.d.ts"
    ]
  }
  

3. 修复Webpack 5缺失Node.js核心模块Polyfill报错 #

Angular CLI v12+使用Webpack 5，不再自动Polyfill Node.js核心模块，按以下步骤处理：

• 安装必要依赖：

  npm install node-polyfill-webpack-plugin @angular-builders/custom-webpack --save-dev
  

• 修改项目根目录的angular.json，替换build和serve的builder配置：

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        },
        // 保留原有其他配置（如outputPath、index、main等）
      }
    },
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      // 保留原有其他配置
    }
  }
  

• 在项目根目录创建webpack.config.js文件：

  const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
  
  module.exports = {
    plugins: [
      new NodePolyfillPlugin()
    ]
  };
  

• 注意：如果是你自己的代码中使用了fs、path等Node.js模块，建议移除这些代码——浏览器环境不支持Node.js核心模块，仅SSR场景才需要这类依赖。

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