适配Angular 5应用的Angular Material版本及安装方法咨询

Hey there! For your Angular 5 application, you'll need to use Angular Material 5.x.x — Angular and Angular Material follow strict version alignment, meaning each major Angular version pairs with the same major version of Material (e.g., Angular 5 ↔ Material 5, Angular 6 ↔ Material 6, etc.).

Here's a detailed, step-by-step installation guide tailored for Angular 5:

1. Confirm your project's Angular version first #

Make sure your existing project is running Angular 5. If you're starting from scratch, create a new Angular 5 project using a compatible Angular CLI version (CLI 1.7.x, which matches Angular 5):

npm install -g @angular/cli@1.7
ng new my-angular5-app
cd my-angular5-app

2. Install Angular Material & CDK #

Angular Material depends on the Angular Component Dev Kit (CDK), so install both together with the 5.x version tag to avoid compatibility issues:

npm install @angular/material@5.x @angular/cdk@5.x --save

3. Install Angular Animations (required for some components) #

Many Material components (like modals, expandable panels) rely on Angular Animations. Install the version matching your Angular 5 setup:

npm install @angular/animations@5.x --save

4. Configure your Angular module #

Open your root AppModule (or any feature module where you'll use Material components) and import the necessary modules. For example:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MatButtonModule, MatCheckboxModule } from '@angular/material'; // Import specific components

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Required for animations
    MatButtonModule, // Add Material button component
    MatCheckboxModule // Add Material checkbox component
    // Add other Material modules here as you need them (e.g., MatInputModule, MatCardModule)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Add a Material theme #

Angular Material requires a theme to style components properly. Open your global styles file (styles.css or styles.scss) and import one of the pre-built themes:

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

You can choose from four pre-built themes: indigo-pink.css, deeppurple-amber.css, pink-bluegrey.css, or purple-green.css.

6. (Optional) Add Material Icons #

If you want to use Material Icons in your app, add the font link to your index.html file:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

7. Test your setup #

Add a few Material components to your component template (e.g., app.component.html) to verify everything works:

<h1>My Angular 5 + Material App</h1>
<button mat-raised-button color="primary">Primary Button</button>
<mat-checkbox>Check me out!</mat-checkbox>

Run your app with ng serve — you should see styled Material components rendering correctly.

Key Notes: #

• Always ensure all Angular-related dependencies (like @angular/core, @angular/common) are on version 5.x to avoid version conflicts.
• If you run into installation errors, check your package.json to confirm versions match, and use the --force flag sparingly only if necessary to resolve minor conflicts.

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