Angular 17中为何无App Module？app.module.ts文件缺失疑问

从Angular 14开始，官方推出了**独立组件（Standalone Components）**特性，现在用CLI默认创建新项目时，会直接启用这个模式——这种模式下不需要依赖NgModule（也就是你找的app.module.ts），组件可以直接声明自己需要的依赖、路由等，所以项目结构里自然就没有这个文件了。

怎么确认是不是这个情况？ #

看你创建项目时用的命令：如果是ng new 项目名，Angular 14+默认就是独立组件模式。要是想创建带app.module.ts的传统结构项目，创建时加参数就行：ng new 项目名 --no-standalone。

现有项目想恢复app.module.ts怎么办？ #

完全可以手动创建，步骤如下：

• 在src/app目录下新建app.module.ts，内容如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// 如果有路由，还要导入RouterModule和路由配置
// import { RouterModule } from '@angular/router';
// import { routes } from './app.routes';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 有路由的话加这行：RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 修改main.ts，把独立组件的启动方式换成NgModule模式：
  原来的独立模式代码大概是这样：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

改成：

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

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

• 如果项目里有路由，记得把路由配置从main.ts的providers里移到AppModule的imports中（参考第一步的注释）。

最后说一句 #

你觉得新建app.module.ts不合常理其实是多虑了——只要你想切换回传统的NgModule开发模式，手动创建这个文件完全合理，Angular也支持这种混合或者切换的操作。

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