NestJS+Angular项目编译报错：模块未找到等问题求助

Let’s break down what’s happening here: Your Angular build is unexpectedly trying to resolve dependencies from your NestJS backend’s node_modules directory—this shouldn’t occur in a standard separated frontend/backend setup. The missing dependency errors (for cache-manager, class-transformer, class-validator) are symptoms, not the root cause. The real issue is why Angular is processing NestJS files at all.

Root Cause Hypotheses #

• Unintended Imports: Somewhere in your Angular codebase, there’s an import referencing files from the ../server directory (e.g., a DTO, service, or utility from your NestJS backend). Webpack will traverse these imports and attempt to bundle the associated NestJS code, which requires its own dependencies.
• Misconfigured Build Context: Your Angular project’s TypeScript or Webpack setup is including the server directory in its build process, causing it to scan and compile NestJS files unintentionally.
• Cross-Directory Contamination: If you’re using concurrently, ensure the frontend and backend are running in isolated contexts without shared environment variables or build paths that could bleed backend files into the Angular build.

Step-by-Step Solutions #

1. Check for Accidental Imports in Angular Code #

First, search your Angular project for imports pointing to the backend. Run this command in your Angular project root:

grep -r "../server" src/

Look for lines like:

import { UserDto } from '../server/src/dtos/user.dto';

If you find such imports, remove them. If you need to share types between frontend and backend, extract them into a standalone shared library (don’t import directly from the server codebase).

2. Update Angular’s TypeScript Configuration #

Open your Angular project’s tsconfig.json and ensure the exclude array includes the server directory to prevent TypeScript from processing backend files:

{
  "compilerOptions": {
    // ... your existing options
  },
  "exclude": [
    "node_modules",
    "server", // Add this line if missing
    "dist"
  ]
}

3. Fix Concurrently Execution Context #

Double-check your package.json scripts to ensure frontend and backend run in their own directories, avoiding cross-contamination:

"scripts": {
  "start:server": "cd server && tsc && node dist/main",
  "start:client": "cd client && ng serve",
  "start": "concurrently \"npm run start:server\" \"npm run start:client\""
}

4. Workaround: Install Missing Peer Dependencies (If Root Cause Isn’t Found) #

If you’ve ruled out accidental imports and config issues but still see errors, install the missing optional peer dependencies in your backend (this is a workaround, not a fix for the core issue):

cd server
npm install cache-manager class-transformer class-validator --save

Additional Notes #

• The warning Critical dependency: the request of a dependency is an expression from load-package.util.js is a common Webpack warning related to NestJS’s dynamic import logic. It will disappear once you resolve the root cause of Angular accessing NestJS files.
• Since your NestJS backend starts fine, it’s likely not using the cache module or validation pipes (explaining why those dependencies weren’t installed), but Angular’s build is still trying to process those files.

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