Angular 15集成@angular/fire@7.5.0报错：环境文件不存在

Angular 15及以上版本默认启用独立组件模式，不再自动生成src/environments目录和环境配置文件，而@angular/fire的初始化脚本仍依赖这个传统文件结构，导致出现找不到文件的错误。以下是修复步骤：

1. 手动创建环境配置文件 #

• 在项目根目录的src文件夹下新建environments目录
• 在该目录下创建两个文件：environment.ts和environment.prod.ts，内容如下：

  // src/environments/environment.ts（开发环境）
  export const environment = {
    production: false,
    firebase: {} // 后续初始化脚本会自动填充Firebase配置
  };
  

  // src/environments/environment.prod.ts（生产环境）
  export const environment = {
    production: true,
    firebase: {} // 对应生产环境的Firebase配置
  };
  

2. 配置angular.json识别环境文件 #

打开项目根目录的angular.json，找到projects -> [你的项目名] -> architect -> build节点：

• 在configurations -> production中添加fileReplacements配置：

  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ]
  

• 若需要在开发环境也使用环境文件，可在build -> options中添加同样的fileReplacements配置（可选）

3. 重新执行@angular/fire初始化命令 #

现在重新运行：

ng add @angular/fire@7.5.0

脚本会自动找到刚创建的environment.ts，并将Firebase的配置信息填充到文件中。

补充：独立组件项目中初始化Firebase #

如果你的项目是独立组件模式，后续可在app.config.ts中导入环境配置完成Firebase初始化：

import { ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    // 按需添加其他Firebase服务的provide，比如provideAuth、provideFirestore等
  ]
};

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