时间戳

首页 > 解决方案 > 如果服务器在 angular6 中关闭，如何将一个服务器 URL 更改为另一个服务器 URL

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

问题描述

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

考虑我有 4 个具有不同 URL（第 1、2、3 和 4 个）的服务器，这里第 1 个服务器具有更高的优先级，我想让它具有默认值。我的问题是，如果服务器已关闭，如何将第 1 个服务器 URL 更改为第 2 个服务器 URL，与第 3 个和第 4 个服务器 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。

标签： javascripthtmlcssangular6

解决方案

对于我的上述问题，我得到了如下解决方案，为此我们必须从 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 依赖注入注册 EnvServiceFactory 作为实例化 EnvService 的工厂是一个 Angular 提供程序配方。

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

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

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

app.module.ts 文件

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

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

我们现在可以通过注入 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 构建应用程序以获取包含 env.js 文件的 dist 文件夹。从那里我们可以更改我们的 URL，如果您在此处更改 URL，它将自动在我们的应用程序中应用新更改的 URL。

欲了解更多信息，请访问以下网站，感谢 Jurgen Van de Moere。

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

推荐阅读