Angular Material安装失败求助：执行步骤后触发未处理异常

Hey there, let's work through that NodeInvocationException you're running into after setting up Angular Material. Based on the steps you've taken, here are the most common fixes to try:

1. Verify Angular Version Compatibility #

Angular Material and CDK versions must match your core Angular version exactly. You're using @angular/material@5.2.4 and @angular/cdk@5.2.4, so your @angular/core in package.json should be on the 5.x release line (e.g., 5.2.x). If it's on a different major version (like 6.x or 4.x), that's almost certainly causing the error.

• Open your package.json and check the @angular/core version.
• If it doesn't match, either:
  • Downgrade/upgrade Angular core to 5.x, or
  • Install the Material/CDK version that matches your Angular core (e.g., Angular 6 needs @angular/material@6.x).

2. Fix Global Theme Import #

Importing the Material theme in app.component.css can sometimes cause issues with SSR or component-specific scoping. Try moving the import to your global styles file instead:

• Open styles.css (or styles.scss if you use SCSS)
• Add this line at the very top:

  @import "~@angular/material/prebuilt-themes/indigo-pink.css";
  

• Remove the import from app.component.css to avoid duplication.

3. Double-Check Module Imports #

Make sure your app.shared.modules.ts has no typos or missing details:

• Confirm the import statement is correct:

  import { MatButtonModule, MatCheckboxModule } from '@angular/material';
  

• Ensure both modules are added to the imports array without typos (capitalization matters: MatButtonModule, not matButtonModule):

  imports: [
    // ... other modules
    MatButtonModule,
    MatCheckboxModule
  ]
  

4. Clear Cache and Rebuild #

Corrupted node modules or build cache often cause weird runtime errors. Let's do a clean rebuild:

1. Stop your dev server
2. Run these commands in your project root:

   # Delete node_modules and lock file
   rm -rf node_modules package-lock.json
   # Reinstall dependencies
   npm install
   # Clear Angular CLI cache
   ng cache clean --force
   # Restart dev server
   ng serve
   

   If you use Yarn, replace the npm commands with yarn cache clean and yarn install.

5. Check Server-Side Rendering (SSR) Configuration #

If this is an Angular Universal (SSR) project, NodeInvocationException usually points to server-side loading issues:

• Make sure Material modules are also imported in app.server.module.ts (or your server-side module).
• Wrap any browser-specific code (like Material component initialization) in a platform check to avoid running it on the server:

  import { isPlatformBrowser } from '@angular/common';
  import { PLATFORM_ID, Inject } from '@angular/core';
  
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      // Put browser-only code here (e.g., Material-related DOM interactions)
    }
  }
  

Start with the first two steps—version mismatch and theme import issues are the most likely culprits here. If those don't work, move on to the others.

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