创建Angular项目时缺失app.modules.ts等文件的问题

这是因为Angular 14及以上版本默认启用了独立组件模式，新项目不再生成传统的NgModule文件（app.module.ts），路由也改用app.routes.ts替代app-routing.module.ts。

解决方式 #

1. 重新创建项目（推荐） #

如果想要传统的NgModule架构，创建项目时添加--no-standalone参数：

ng new name --no-standalone

创建过程中如果选择添加路由，就会自动生成app.module.ts和app-routing.module.ts。

2. 现有项目手动添加文件 #

如果不想重新创建，可手动补上所需文件：

• 创建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 { }

• 若需要路由，创建src/app/app-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

记得把AppRoutingModule导入到app.module.ts的imports数组里。

• 修改src/main.ts，切换到NgModule启动方式：
  替换原本的独立组件启动代码为：

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

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

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