Angular 17中使用Angular Material UI的方法及无app.module.ts时的解决方案

一、基础安装步骤 #

无论项目是否有app.module.ts，第一步都是通过CLI命令完成Angular Material的安装与基础配置：

• 执行命令：ng add @angular/material
  该命令会自动完成主题选择、动画配置、字体引入，还会根据你的项目结构（独立组件/传统模块模式）适配导入逻辑，比手动配置更高效且不易出错。

二、无app.module.ts时的使用方式（独立组件模式） #

Angular 17默认采用独立组件模式，不存在app.module.ts，此时推荐以下两种使用方式：

1. 组件级别按需导入（推荐） #

在需要使用Material组件的独立组件中，直接将对应的Material模块加入组件的imports数组：

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [MatButtonModule, MatCardModule],
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {}

随后在组件模板中直接使用Material组件：

<mat-card>
  <button mat-button>点击测试</button>
</mat-card>

2. 创建全局共享的Material导入集合 #

若多个组件需要复用同一批Material组件，可创建单独文件（如material.imports.ts）统一导出常用模块：

import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';

export const MATERIAL_IMPORTS = [
  MatButtonModule,
  MatCardModule,
  MatInputModule
];

之后在组件中导入该集合即可：

import { Component } from '@angular/core';
import { MATERIAL_IMPORTS } from '../material.imports';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [...MATERIAL_IMPORTS],
  templateUrl: './example.component.html'
})
export class ExampleComponent {}

3. 根级别全局导入（不推荐） #

如果希望所有组件无需单独导入即可使用Material组件（会增加打包体积，仅适合小型项目），可在main.ts的bootstrap配置中添加全局导入：

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { MATERIAL_IMPORTS } from './app/material.imports';

bootstrapApplication(AppComponent, {
  providers: [provideAnimationsAsync()],
  imports: [...MATERIAL_IMPORTS]
});

三、替代传统模块导入的其他方式 #

除了上述组件/全局导入逻辑，还有两种可选方式：

1. CDN引入（仅用于快速原型） #

如果是快速验证原型，可直接在index.html中引入CDN资源，无需导入模块即可使用Material标签（无TypeScript类型支持，不适合生产环境）：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@angular/material/prebuilt-themes/indigo-pink.css">

2. 手动创建NgModule（模块模式） #

若你手动将项目转为传统模块模式（创建了app.module.ts），可按旧版本逻辑在模块中导入Material组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, MatButtonModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

四、配置文件导入未生效的排查要点 #

你提到配置文件导入未生效，通常是以下原因导致：

• Angular 17独立模式下，angular.json等配置文件不负责组件/模块的导入逻辑，必须在组件或main.ts的bootstrap配置中完成导入。
• 若使用模块模式，需确保app.module.ts的imports数组中正确添加了Material模块，且无拼写错误。
• 遗漏动画依赖：Material组件必须依赖动画模块，独立模式需导入provideAnimationsAsync()，模块模式需导入BrowserAnimationsModule。

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