Angular 17 项目中的 app.module.ts

问题描述

当开发者升级到 Angular 17 或创建新项目时，发现 app.module.ts 文件不复存在。这一变动让许多熟悉 Angular 模块化架构的开发者感到困惑。核心疑问是：

• Angular 17 是否移除了 app.module.ts？
• 如何恢复缺失的 app.module.ts？
• 如果不使用模块系统，如何管理组件和服务？

本文将全面解析这一变动并给出多场景下的解决方案。

注意

本文适用于 Angular 17 及以上版本。

原因分析：Angular 17 的变化

真相 app.module.ts 并非被移除，而是 Angular 17 改变了默认项目模板的实现方式：

1. Standalone 成为默认
   从 Angular 17 开始，所有新项目默认采用 独立组件架构(Standalone Components)，无需通过 NgModule 管理组件依赖。

2. 模块化架构仍支持
   传统的 NgModule 架构仍是有效模式，需要通过特定标志显式启用。

误解澄清

解决方案

场景① 创建新项目时保留 app.module.ts

在初始化项目时使用 --no-standalone 标志：

# 创建保留模块系统的项目
ng new your-project-name --no-standalone

执行后项目结构将包含典型模块文件：

src/
└── app/
    ├── app.component.ts
    ├── app.component.html
    └── app.module.ts  ✅ 已生成

特别注意

Angular 17 文档推荐优先使用独立组件，因为其具有：

• 更少的样板代码
• 更简单的依赖管理
• 更易理解的组件层级

场景② 为已有项目手动添加 AppModule

若您的无模块项目后期需要接入模块化结构，请手动创建 app.module.ts：

// 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,
    // 添加其他模块，例如：
    // FormsModule,
    // HttpClientModule
  ],
  providers: [], // 添加全局服务
  bootstrap: [AppComponent]
})
export class AppModule { }

场景③ 在独立组件架构中使用旧模块

当升级 Angular 17 后，现有应用仍可延续模块化方案：

// src/main.ts
import { importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppModule } from './app/app.module'; // 导入现有模块
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(AppModule) // ✨ 模块转换为提供者
  ]
});

同时移除模块中的启动器声明：

// app.module.ts
@NgModule({
- bootstrap: [AppComponent] // ➖ 删除此行
})

架构对比：模块化 vs 独立组件

特性	NgModule 架构	独立组件架构
文件结构	app.module.ts + 组件	扁平化组件结构
依赖导入	通过模块 imports	组件内直接导入
启动方式	bootstrapModule()	bootstrapApplication()
适用场景	大型复杂应用迁移	新项目/简单应用

迁移建议

Angular 提供渐进式迁移路径：

总结建议

1. 新项目默认采用独立组件架构 - 遵循 Angular 官方推荐实践
2. 升级项目可用混合模式 - 通过 importProvidersFrom(AppModule) 整合旧模块
3. 特殊需求显式启用 - 使用 --no-standalone 创建模块化项目

Angular 并未废弃模块系统，而是提供了更灵活的架构选项。开发者可根据项目需求选择最适合的模式。

参考官方资源：Angular 全新文档 | 独立组件指南