Angular 4应用编译报错：__webpack_require__相关TypeError问题咨询

Hey there, let's tackle this error you're facing. That Uncaught TypeError: Object(...) is not a function originating from @angular/cdk/bidi.es5.js is almost always caused by a version mismatch between Angular 4 and the Angular Material/CDK packages you're using. Here's how to fix it step by step:

1. Verify Version Compatibility #

Angular Material and CDK versions are tightly tied to Angular's major version. For Angular 4, you need to use Angular Material/CDK 4.x (not 5.x or higher). Higher versions of Material/CDK rely on features introduced in Angular 5+, which aren't supported in Angular 4.

Check your package.json file to see what versions you're currently using. Look for lines like:

"@angular/material": "^5.0.0",
"@angular/cdk": "^5.0.0"

If they're 5.x or newer, that's the root of your problem.

2. Downgrade to Compatible Versions #

Install a stable 4.x version of Material and CDK. Run this command in your project root:

npm install @angular/material@4.4.3 @angular/cdk@4.4.3 --save

(4.4.3 is a well-supported stable version for Angular 4; you can use any 4.x release if you prefer)

3. Clean and Rebuild Your Project #

Old cached files or mismatched dependencies can still cause issues, so follow these steps to ensure a fresh build:

• Delete your node_modules folder and lock file:
  • On macOS/Linux: rm -rf node_modules package-lock.json
  • On Windows: rmdir /s/q node_modules && del package-lock.json
• Clear npm's cache:

  npm cache clean --force
  

• Reinstall dependencies:

  npm install
  

• Rebuild your app:

  ng build --prod
  # Or use ng serve for development
  ng serve
  

4. Check for Hidden Dependency Conflicts #

Sometimes other packages might pull in newer Angular versions indirectly. Run this command to check your dependency tree and ensure all Angular-related packages are on version 4.x:

npm ls @angular/core

If you see any entries with versions higher than 4.x, you'll need to adjust those packages to compatible versions as well.

Why This Happens #

Newer versions of Angular CDK (like 5.x+) use language features and Angular APIs that weren't available in Angular 4. For example, they might use the spread operator in ways that Angular 4's compiler can't handle, or rely on RxJS versions that aren't compatible with Angular 4. Downgrading to matching versions resolves these incompatibilities.

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