Logger中间件抛错，Angular CLI无法创建组件均报NullLogger未定义

Hey there, let's tackle these two related errors you're facing—both the Logger middleware TypeError and the Angular CLI component creation failure stem from the same root cause, so we can fix them together! This error almost always boils down to mismatched dependencies, broken cache, or incorrect references to the NullLogger class from @angular-devkit/core.

Step-by-Step Solutions #

1. Clear Cache and Reinstall Dependencies #

Corrupted node modules or cached packages are a common culprit here. Let's wipe them clean and start fresh:

• First, delete your node_modules folder and lock files:

  # For macOS/Linux
  rm -rf node_modules package-lock.json yarn.lock
  
  # For Windows (Command Prompt)
  rmdir /s /q node_modules
  del package-lock.json yarn.lock
  

• Reinstall all dependencies:

  npm install
  # Or if you use yarn:
  yarn install
  

• Clear the npm cache to eliminate any corrupted cached packages:

  npm cache clean --force
  

2. Align @angular-devkit/core Version with Angular CLI #

This error often pops up when the @angular-devkit/core package version doesn't match your installed Angular CLI version. Here's how to fix it:

• Check your current Angular CLI version:

  ng version
  

• Check the installed version of @angular-devkit/core in your project:

  npm list @angular-devkit/core
  

• If the versions don't match, install the matching version of @angular-devkit/core:

  npm install @angular-devkit/core@<your-cli-version> --save-dev
  

  Replace <your-cli-version> with the exact version number from ng version, e.g., 14.2.10

3. Fix NullLogger References (For Custom Logger Middleware) #

If you're seeing the error in your own Logger middleware, double-check how you're importing and using NullLogger:

• Ensure you're importing it from the correct package:

  import { NullLogger } from '@angular-devkit/core';
  

• Make sure you're instantiating it correctly (not trying to access a static property):

  // Correct usage
  const logger = new NullLogger();
  

4. Update Angular CLI to the Latest Stable Version #

Outdated CLI versions can introduce compatibility issues. Update both global and local CLI instances:

• Update global Angular CLI:

  npm install -g @angular/cli@latest
  

• Update your project's local CLI and core Angular packages:

  ng update @angular/cli @angular/core
  

  Follow any on-screen prompts for handling breaking changes if you're upgrading across major versions.

Verify the Fix #

After completing the steps above, test if the issues are resolved:

• For the component creation error: Run ng generate component test-component—it should create the component without throwing the NullLogger error.
• For the Logger middleware error: Run your application or middleware to confirm the TypeError no longer occurs.

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