Angular项目缺失app.module.js却出现app.config.ts的原因及解决方案

这不是报错，是Angular CLI版本带来的变化——从Angular 14开始，ng new命令默认创建独立应用（Standalone App），不再生成传统的app.module.ts，而是用app.config.ts来管理全局配置、依赖注入等内容，替代了NgModule的部分核心功能。

方案1：切换回传统NgModule项目结构 #

如果你更习惯NgModule的开发模式，可按以下操作处理：

• 重新创建项目时，执行命令强制生成NgModule结构：

  ng new your-project-name --no-standalone
  

• 若已有现有项目，手动转为NgModule结构：
  1. 在项目src/app目录下创建app.module.ts，示例代码如下：

     import { NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     import { AppComponent } from './app.component';
     // 按需导入Angular Material模块
     import { MatButtonModule } from '@angular/material/button';
     
     @NgModule({
       declarations: [AppComponent],
       imports: [
         BrowserModule,
         BrowserAnimationsModule,
         MatButtonModule
       ],
       providers: [],
       bootstrap: [AppComponent]
     })
     export class AppModule { }
     

  2. 修改src/main.ts，将启动逻辑切换为NgModule模式：
     原独立应用启动代码：

     import { bootstrapApplication } from '@angular/platform-browser';
     import { appConfig } from './app/app.config';
     import { AppComponent } from './app/app.component';
     
     bootstrapApplication(AppComponent, appConfig)
       .catch(err => console.error(err));
     

     修改为：

     import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
     import { AppModule } from './app/app.module';
     
     platformBrowserDynamic().bootstrapModule(AppModule)
       .catch(err => console.error(err));
     

  3. 无需保留app.config.ts，可直接删除。

方案2：在独立应用中配置Angular Material #

如果想适配新的独立应用模式，直接在app.config.ts中配置Material依赖即可：

1. 打开src/app/app.config.ts，导入所需的Material模块和全局配置：

   import { ApplicationConfig, importProvidersFrom } from '@angular/core';
   import { provideRouter } from '@angular/router';
   import { routes } from './app.routes';
   // 导入Material相关模块
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { MatButtonModule } from '@angular/material/button';
   import { MatCardModule } from '@angular/material/card';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideRouter(routes),
       // 全局导入动画模块和Material组件模块
       importProvidersFrom(BrowserAnimationsModule, MatButtonModule, MatCardModule)
     ]
   };
   

2. 在组件中直接使用Material组件，比如在app.component.html中添加：

   <button mat-button color="primary">Material按钮</button>
   

3. 补充说明：独立组件也可单独导入所需的Material模块，无需全局配置，按需选择即可。

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