正文 

当前位置： 首页 > 问答 >

Firebase Angular 4 基于节点环境初始化

     2023-03-07     237

关键词：

【中文标题】Firebase Angular 4 基于节点环境初始化【英文标题】：Firebase Angular 4 Initialize based on node environment 【发布时间】：2018-03-31 03:44:34 【问题描述】：

我已经使用 Angular CLI 构建了我的 Angular 4 项目。 我正在 Heroku 上部署我的应用程序，我已经为开发和生产环境创建了 heroku 管道。 我有两个 firebase 数据库开发和生产，我希望我的 angular 2 应用程序基于 heroku 配置变量连接到 firebase 数据库

我在 google 上搜索，发现这个 answer 很有帮助，因为 @yoni-rabinovitch 建议在节点服务器上发送 HTTP 请求以检查应用程序初始化时的环境。

我是 Angular 4 和打字稿的初学者，我需要实现的只是发送一个 HTTP 请求并根据响应初始化 firebase 模块。

app.module.ts

import  environment  from '../environments/environment';

@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  bootstrap: [AppComponent]
)
export class AppModule

任何帮助将不胜感激

【问题讨论】：

修改了我的答案 【参考方案1】：

我必须在我的服务器上创建一个 API 并在 environments.ts 文件中设置以下函数。

export let environment: any = 
  production: false,
  firebase: ...
;    

export const setEnvironment = async () => 
      try 
        const response = await fetch('api/checkEnvironment');
        const json = await response.json();
        if (json.data?.isPROD) 
          // Prod Environment
          environment = 
            production: true,
            firebase: ...
            ;
        
        
       catch (error) 
        throw error;
      
    ;

并从main.ts 文件中调用它

import 
  environment,
  setEnvironment,
 from './environments/environment';
import  enableProdMode  from '@angular/core';
import  platformBrowserDynamic  from '@angular/platform-browser-dynamic';
import  AppModule  from './app/app.module';
import  FIREBASE_OPTIONS  from '@angular/fire';

(async () => 
  await setEnvironment();

  if (environment.production) 
    enableProdMode();
  

  platformBrowserDynamic([
    
      provide: FIREBASE_OPTIONS,
      useValue: environment.firebase,
    ,
  ])
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
)();

【讨论】：

【参考方案2】：

您可以创建一个函数来接收配置：

import  environment  from '../environments/environment';

@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(AppModule.getFirebaseConfig())
  ],
  bootstrap: [AppComponent]
)
export class AppModule 
  static getFirebaseConfig(): FirebaseAppConfig 
    // do http request

    // return correct correct configuration depending on http request
    return environment.firebase;

【讨论】：

感谢您的回答我收到此错误“typeof AppModule”类型上不存在属性“getFirebaseConfig” 是的，因为HttpClient是异步的，所以需要等待请求完成 另外，我可以从解析 firebase 配置的 getFirebaseConfig 返回一个 Promise 吗？如果是，那怎么办？ 我正在这样做 static getFirebaseConfig(): Promise return new Promise(resolve => resolve(environment.firebase); ); 但它给了我错误（错误：您的 API 密钥无效，请检查您是否正确复制了它。）

Angular 4 firebase 下拉选择标签选项

】Angular4firebase下拉选择标签选项【英文标题】：Angular4firebasedropdownselecttagoption【发布时间】：2018-05-0904:30:44【问题描述】：我正在使用Angular4和firebase。我正在尝试为属性列表构建一个下拉选择器。从下拉列表中选择属性后，属... 查看详情

Angular 和 Firebase 实时数据库。如何让孩子知道其 id 属性但不知道其父节点

】Angular和Firebase实时数据库。如何让孩子知道其id属性但不知道其父节点【英文标题】：Angular&FirebaseRealtime-Database.Howtogetchildknowingitsidpropertybutwithoutknowingitsparentnode【发布时间】：2022-01-0220:43:00【问题描述】：我的数据库是这... 查看详情

Angular 4 Firebase angularfire 按值对列表进行排序

】Angular4Firebaseangularfire按值对列表进行排序【英文标题】：Angular4FirebaseangularfireSortingalistbyvalue【发布时间】：2018-01-1309:57:20【问题描述】：我正在使用Angular4Firebase和AngularFire，并且我有以下firebase数据库"users":"Test1":"totalscore":50,"... 查看详情

将 Firebase 管理员与 Angular 4 项目集成

】将Firebase管理员与Angular4项目集成【英文标题】：IntegratingFirebaseadminwithAngular4project【发布时间】：2018-03-2909:10:54【问题描述】：尝试将firebase-admin添加到我的Angular项目中，但出现我无法解决的错误（见屏幕截图）有npminstallgoogle... 查看详情

如何为 Angular 应用禁用 Firebase 的 404 页面

】如何为Angular应用禁用Firebase的404页面【英文标题】：Howtodisablefirebase\'s404pageforanangularapp【发布时间】：2021-01-1903:31:34【问题描述】：我有一个Angular应用程序，它与firebase一起部署到生产环境中。该应用程序包括以下重定向constr... 查看详情

Angular 4 环境设置

】Angular4环境设置【英文标题】：Angular4EnvironmentSetup【发布时间】：2018-12-2501:31:55【问题描述】：如何在VisualStudio2015中设置Angular4环境？angular4开发是否必须安装nodejs？【问题讨论】：【参考方案1】：你需要npm作为包管理器。npm... 查看详情

基于centos7.4安装部署大数据基础软件环境(代码片段)

目录双网卡bond网络配置1）关闭NetworkManager2）查看up状态的网卡以及信息3）配置网卡4）配置保存好后，重启network服务配置主机名挂载镜像关闭selinux关闭防火墙安装配置NTP1）修改所有节点的/etc/ntp.conf2）... 查看详情

在 Angular 4 中使用节点模块（网站刮板）使用失败

】在Angular4中使用节点模块（网站刮板）使用失败【英文标题】：Usingnode_module(websitescraper)inAngular4failesonusage【发布时间】：2018-04-1911:27:47【问题描述】：目前我正在尝试将node_module“网站抓取工具”[1]添加到我的Angular4项目中。... 查看详情

Angular 6.4.1 环境构建不起作用

】Angular6.4.1环境构建不起作用【英文标题】：Angular6.4.1environmentbuildsnotworking【发布时间】：2020-10-1710:58:43【问题描述】：因此尝试执行“npmrunngbuild--configuration=production”并尝试让它使用我的angular.json中的FileReplacements将environment.ts... 查看详情

如何在Angular 13中基于不同的环境（本地和qa）注入服务（本地和api）？

】如何在Angular13中基于不同的环境（本地和qa）注入服务（本地和api）？【英文标题】：Howtoinjectservices(localandapi)basedondifferentenv\'s(local&qa)inAngular13?【发布时间】：2022-01-0913:15:18【问题描述】：api-local.service.tsimportInjectablefrom\'@a... 查看详情

我是不是应该在本地计算机中拥有与我要部署到的环境版本相同的节点（例如：Firebase Cloud Functions）？

...算机中拥有与我要部署到的环境版本相同的节点（例如：FirebaseCloudFunctions）？【英文标题】：ShouldIhavethesameNodeinmylocalmachineastheversionoftheenvironmentI\'mdeployingto(ex:FirebaseCloudFunctions)?我是否应该在本地计算机中拥有与我要部署到的环... 查看详情

使用 webpack 使用基于节点环境的特定文件

】使用webpack使用基于节点环境的特定文件【英文标题】：Usewebpacktousespecificfilebasedonnodeenvironment【发布时间】：2019-06-2121:29:22【问题描述】：我正在开发一个Vue应用程序（使用cli3）。第三方前端组件需要一个配置文件。我想根据... 查看详情

Firebase Angular 应用程序未连接 Heroku 上的 h NodeJS 应用程序

】FirebaseAngular应用程序未连接Heroku上的hNodeJS应用程序【英文标题】：FirebaseAngularappnotconnectinghNodeJSapponHeroku【发布时间】：2017-04-3007:10:06【问题描述】：我已经在Heroku上部署了节点服务器，在Firebase上部署了客户端Angular应用程序... 查看详情

Firebase 函数环境变量无法读取未定义的属性

】Firebase函数环境变量无法读取未定义的属性【英文标题】：Firebasefunctionsenvironmentvariablescannotreadpropertyofundefined【发布时间】：2019-01-2318:36:56【问题描述】：我有一个与firebase连接的Angular应用程序。到目前为止，我已经完成了数... 查看详情

Firebase runTransactionBlock() 删除节点

】FirebaserunTransactionBlock()删除节点【英文标题】：FirebaserunTransactionBlock()deletesnode【发布时间】：2015-11-2801:48:30【问题描述】：我正在使用适用于iOS的FirebaseSDK(2.4.2)。以下代码是SLComposeServiceViewController对象中使用的didSelectPost()函数... 查看详情

比较 JWT 过期时间到现在，总是错误的，节点 Angular 4 应用程序

】比较JWT过期时间到现在，总是错误的，节点Angular4应用程序【英文标题】：comparingJWTexpiredtimetonow,alwaysfalse,nodeAngular4app【发布时间】：2018-04-1321:28:44【问题描述】：当用户从节点服务器登录时，我正在签署JWT，使用express发送到A... 查看详情

无法使用 Angular 7 将授权标头发送到节点 11/Express 4 服务器

】无法使用Angular7将授权标头发送到节点11/Express4服务器【英文标题】：CannotsendAuthorizationheadertoNode11/Express4serverusingAngular7【发布时间】：2019-09-1120:01:36【问题描述】：我无法通过GETrequest将Authorization标头从我的角度前端发送到我... 查看详情

在 Angular2/4/5 中，如何基于基于令牌的身份验证安全地调用 WebAPI 操作

】在Angular2/4/5中，如何基于基于令牌的身份验证安全地调用WebAPI操作【英文标题】：InAngular2/4/5,HowtoSecurelycallWebAPIaction,basedonTokenbasedAuthentication【发布时间】：2018-08-2507:10:47【问题描述】：我需要知道，在AngularFrontEnd中获取令牌... 查看详情