更多

Question

在Angular（类型脚本）中有许多配置文件。哪个是保存全局设置的正确方法？

例如，当我从本地调用API时，我的LOGDEBUG("2")为rootUrl但是当我开启制作时，它应该是localhost:42000。

我想在全球某个地方保存http:www.someting.com，所以如果我开启制作，那么我只需要更改rootUrl。

请建议我应该在哪里保存这些全局设置，与Asp.Net中的web.config相同。

Answer 1

这个答案类似于@trichetriche，关于代码的更多细节。

用于development/testing目的

environment.ts

export const environment = {
  production: false,
  appUrl: 'localhost:4200'
};

production

environment.prod.ts

export const environment = {
      production: true,
      appUrl: 'mywebsite.com'
    };

用法

service.ts

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

this._http.get(environment.appUrl, requestHeaders(options));

记下所有production个文件中的environment参数。我相信你也可以创建更多的环境，比如environment.unittesting.ts。

Answer 2

当我第一次开始使用Angular 2时，我使用了一个global.ts文件，我将所有变量放入其中，以便我可以轻松更改它。

然后我发现了角度CLI提供的环境。您所要做的就是为文件命名environment.prod.ts（对于prod），并在构建时使用ng build --prod。在开发时，使用environment.ts文件，两个文件必须具有相同的变量。

我希望这能回答你的问题。

Answer 3

我还有另一种定义全局设置的方法。因为如果我们在ts文件中定义，如果在生产模式下进行构建，则很难找到要更改值的常量。

export class SettingService  {

  constructor(private http: HttpClient) {

  }

  public getJSON(file): Observable<any> {
      return this.http.get("./assets/configs/" + file + ".json");
  }
  public getSetting(){
      // use setting here
  }
}

在应用程序文件夹中，我添加文件夹configs / setting.json

setting.json中的内容

{
    "baseUrl": "http://localhost:52555"
}

在应用模块中添加APP_INITIALIZER

 {
      provide: APP_INITIALIZER,
      useFactory: (setting: SettingService) => function() {return setting.getSetting()},
      deps: [SettingService],
      multi: true
    }

通过这种方式，我可以更轻松地更改json文件中的值。

我在项目中将它应用于baseUrl，dateformat，sessiontimeout ...

Answer 4

您可以非常轻松地将process.env与webpack结合使用。例如。

/**
 * This interface makes sure we don't miss adding a property to both `prod` and `test`
 */
interface Config {
  someItem: string;
}

/**
 * We only export a single thing. The config.
 */
export let config: Config;

/**
 * `process.env.NODE_ENV` definition is driven from webpack
 *
 * The whole `else` block will be removed in the emitted JavaScript
 *  for a production build
 */
if (process.env.NODE_ENV === 'production') {
  config = {
    someItem: 'prod'
  }
  console.log('Running in prod');
} else {
  config = {
    someItem: 'test'
  }
  console.log('Running in test');
}

您可以使用process.env.NODE_ENV

更改webpack -p --define process.env.NODE_ENV='\"production\"' --config ./src/webpack.config.js

在Angular 4中保存全局设置的位置

4 个答案:

更多