Angular项目找不到app.module.ts及图标库添加问题求助

一、找不到app.module.ts的处理方式 #

Angular 14及以上版本默认启用独立组件模式，新建项目时如果没手动指定启用模块系统，就不会自动生成app.module.ts。你有两种选择：

1. 手动创建并启用模块模式 #

在src/app目录下新建app.module.ts文件，填入以下代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

接着修改main.ts，把原来的独立组件启动代码替换成模块启动逻辑：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

2. 继续使用独立组件模式 #

如果不想用模块系统，视频里的配置可以直接迁移到独立组件中。比如导入Material相关模块时，直接在组件的imports数组里添加，或者在main.ts的bootstrapApplication配置中全局导入所需模块。

二、Angular Material图标库添加失败的解决步骤 #

1. 确认依赖安装到位 #

先打开终端执行以下命令确保图标库已安装：

ng add @angular/material

执行过程中确认勾选了图标相关选项；如果之前已经安装过Material，单独安装图标依赖：

npm install @angular/material

2. 在独立组件中导入图标模块 #

如果用的是独立组件模式，直接在app.component.ts中导入MatIconModule并添加到组件的imports数组：

import { Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [MatIconModule] // 这里添加图标模块
})
export class AppComponent {
  title = 'crud-app';
}

3. 验证图标使用 #

在app.component.html中直接使用图标：

<mat-icon>home</mat-icon>

常见排查点 #

• 确认@angular/material版本和你的Angular 15版本完全匹配，版本不一致会导致兼容问题
• 检查index.html中是否引入了Google字体图标链接（ng add通常会自动添加，若没有则手动补上）：

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

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