Angular新项目缺失environments.ts等核心文件，求助解决

问题原因 #

Angular 17及后续版本，新建项目默认启用独立组件模式，不再自动生成app.module.ts，也默认不创建environments环境配置文件夹，这和旧版本的项目结构存在差异。

解决办法 #

方法一：创建项目时指定生成传统模块模式 #

使用Angular CLI创建项目时，添加--no-standalone参数，命令如下：

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

执行该命令后生成的项目，会自动包含app.module.ts以及environments文件夹（内含environment.ts、environment.prod.ts），和你期望的项目结构一致。

方法二：在现有独立组件项目中手动补充文件 #

1. 添加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],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接着修改src/main.ts，将启动逻辑切换为模块模式：
把原来的bootstrapApplication(AppComponent, ...)代码替换为：

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

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

2. 添加环境配置文件

在src目录下新建environments文件夹，分别创建两个文件：

• environment.ts：

export const environment = {
  production: false
};

• environment.prod.ts：

export const environment = {
  production: true
};

最后修改angular.json，找到projects -> [你的项目名] -> architect -> build -> configurations，添加环境配置关联：

"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  // 其他原有配置...
}

方法三：使用旧版本Angular创建项目 #

如果你是跟着Angular 16及以下版本的教程学习，可以直接指定版本创建项目，命令如下：

ng new your-project-name --version 16

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