个人中心
gpt4 book ai didi

javascript - 如果服务器在 angular6 中关闭，如何将一个服务器 URL 更改为另一个服务器 URL

转载 作者：行者123 更新时间：2023-11-28 00:34:49 26 4
gpt4 key购买 nike

我有 4 个具有不同 URL 的服务器，如果服务器在 Angular 6 应用程序中出现故障，我想将一个服务器 URL 更改为另一个服务器 URL，如果有人知道请帮助我。

考虑我有 4 个具有不同 URL 的服务器(第 1、2、3 和 4)，这里第 1 个服务器具有更高的优先级，我想让它具有默认值。我的问题是，如果服务器出现故障，如何将第一台服务器 URL 更改为第二台服务器 URL，与第三台和第四台服务器的 URL 相同。任何帮助将不胜感激，并提前致谢。

服务.ts文件

firstserver ="http://111.121.1.342:8001/rest/formalities";
secondserver="http://111.121.1.342:8002/rest/formalities";
thirdserver="http://111.121.1.342:8003/rest/formalities";
fourthserver="http://111.121.1.342:8004/rest/formalities";

validateUserDetails(employeeDetails): Observable<any> {
    console.log(serversurl);
    return this._httpClint.post(serversurl(would be first/second/third/fourth server), employeeDetails);
}

在这里我必须检查第一个服务器 URL 是启动还是关闭然后应用到服务器 URL 哪个是启动的。

预期结果:

我应该能够根据上下情况将一个服务器 URL 更改为另一个服务器 URL。

最佳答案

对于我的上述问题，我得到了如下解决方案，为此我们必须从 JAVASCRIPT 寻求帮助。

第 1 步:->

在 index.html 目录下创建 env.js 文件，如下所示。

(function (window) {
    window.__env = window.__env || {};

    // API url
    window.__env.apiUrl = "http://RestWebService";

    // Whether or not to enable debug mode
    // Setting this to false will disable console output
    window.__env.enableDebug = true;
  }(this));

上面的env.js文件的意思就是我们创建了一个名为apiUrl的全局变量，用来存储我们的服务器URL。这样我们就可以全局访问该变量。接下来，我们在 index.html 中的部分添加一个元素以在加载 Angular 之前加载 env.js:

<html>

  <head>
    <!-- Load environment variables -->
    <script src="env.js"></script>
  </head>

  <body>
    ...
    <!-- Angular code is loaded here -->
  </body>  

</html>

默认情况下，在构建应用程序时，不会将 env.js 等 JavaScript 文件复制到输出目录。

为确保在运行 ng build 或 ng serve 时将文件复制到输出目录，我们必须将其添加到 angular.json 中应用程序构建配置的 Assets 部分:

angular.json文件

{
  "projects": {
    "app-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/env.js"
            ]
          }
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              // ...
            }
          }
        }
      }
    }
  }
}

第 2 步:->

以任何名称创建一项服务，在我的例子中，我在 app.module.ts 目录中将其创建为 env.service.ts。这是一个服务文件，将用于获取我们的服务器 URL 值，该值存储在 apiUrl(env.js 文件)中。

环境服务.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EnvService {

  // The values that are defined here are the default values that can
  // be overridden by env.js

  // API url
  public apiUrl = '';

  // Whether or not to enable debug mode
  public enableDebug = true;

  constructor() {
  }

}

第 3 步:->

在 env.service.ts 的同一目录中创建服务提供者文件。

env.service.provider.ts

import { EnvService } from './env.service';

export const EnvServiceFactory = () => {  
  // Create env
  const env = new EnvService();

  // Read environment variables from browser window
  const browserWindow = window || {};
  const browserWindowEnv = browserWindow['__env'] || {};

  // Assign environment variables from browser window to env
  // In the current implementation, properties from env.js overwrite defaults from the EnvService.
  // If needed, a deep merge can be performed here to merge properties instead of overwriting them.
  for (const key in browserWindowEnv) {
    if (browserWindowEnv.hasOwnProperty(key)) {
      env[key] = window['__env'][key];
    }
  }

  return env;
};

export const EnvServiceProvider = {  
  provide: EnvService,
  useFactory: EnvServiceFactory,
  deps: [],
};

EnvServiceProvider:->这是一个 Angular Provider 配方，用于注册具有 Angular 依赖注入(inject)的 EnvServiceFactory 作为实例化 EnvService 的工厂。

EnvServiceFactory:->它是一个从 window.__env 中读取环境值并实例化 EnvService 类实例的工厂。

因此，在这个 env.service.provider.ts 文件的所有摘要中，我们导出一个 EnvServiceFactory 函数，该函数创建 EnvService 类的实例并将所有值从 window.__env 对象复制到 EnvService 实例中。

最后，要将 EnvServiceProvider 注册为 Angular 依赖注入(inject)系统的配方，我们必须将其列为我们应用程序的提供程序数组中的提供程序:

app.module.ts 文件

import { NgModule } from '@angular/core';  
import { EnvServiceProvider } from './env.service.provider';

@NgModule({
  imports: [ // ... ],
  providers: [EnvServiceProvider],
})
export class AppModule {}

我们现在可以通过注入(inject) EnvService 从我们应用程序的任何地方访问我们的环境变量，我在下面使用它。

服务.ts文件

import { EnvService } from '../env.service';

   constructor(private _httpClinet: HttpClient, private env: EnvService) {
    }

emplLoginCheckUrl = this.env.apiUrl+"/checkValidUser";

 validateUserDetails(employeeDetails): Observable<any> {
        console.log(this.emplLoginCheckUrl);
        return this._httpClinet.post(this.emplLoginCheckUrl, employeeDetails);
    }

这就是第 3 步。

第 4 步:->

最后我们要做的是在服务应用程序之前，我们必须使用 ng build --prod 构建应用程序以获取 dist 文件夹，其中包含 env.js 文件。从那里我们可以更改我们的 URL，如果您在那里更改 URL，它将自动在我们的应用程序中应用新的更改后的 URL。

有关更多信息，请访问以下网站，谢谢 Jurgen Van de Moere。

https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/

关于javascript - 如果服务器在 angular6 中关闭，如何将一个服务器 URL 更改为另一个服务器 URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54233032/

26 4 0
文章推荐： html - 两个 CSS 网格在同一个父容器中不对齐
文章推荐： javascript - 为什么Ajax请求改变参数值？
文章推荐： c++ - 任何人都可以想出一种方法来检查错误吗？
文章推荐： css - Bootstrap 4 - H3 inside 下 zipper 接
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com