如何在不使用 http.get 方法的情况下为 Angular 2 模块 bootstrap JSON 配置文件

Question

我在根目录下有一个 json 文件：

config.json

{ "base_url": "http://localhost:3000" }

在我的服务class中，我想这样使用它：

private productsUrl = config.base_url + 'products';

我发现了很多帖子，这些帖子要么需要 http.get 请求来加载该文件以获取该变量，要么是 angular.js 的过时解决方案（angular 1)

我不敢相信没有更简单的方法来包含我们已经存在的这个文件，而无需向服务器发出额外的请求。

在我看来，我本以为至少引导函数能够提供这种功能，比如：

platformBrowserDynamic().bootstrapModule(AppModule, { config: config.json });

顺便说一句，这可行，但不是理想的解决方案：

export class Config {
  static base_url: string = "http://localhost:3004/";
}

并在需要的地方使用它：

private productsUrl = Config.base_url + 'products';

这并不理想，因为我必须在构建脚本中创建 class（或替换属性）。（正是我想用 config.json 文件做什么）。

我仍然更喜欢 config.json 文件方法，因为它不会干扰 TypeScript 编译器。欢迎任何想法如何做，非常感谢！

Answer 1

你在使用 webpack 吗？如果你是，你可以这样做

const config = require('./config.json');

@Injectable()
export class MyService {
   private config:any = config;
   ....
}

在你的 webpack 配置中你需要 json-loader

  ...
  module: {
    ...
    loaders: [
      ...
      {
        test: /\.json$/,
        loaders: ["json-loader"]
      },
      ...
    ]
  }
  ...

Answer 2

This link explains how to use System.js to load json files in an angular app.

特别感谢@eotoole 为我指明了正确的方向。

如果上面的link还不够清楚，在System.jsconf里面加个图就行了。像这样：

map: { 'plugin-json': 'https://unpkg.com/systemjs-plugin-json' }*

*（使用外包）

或

map: { 'plugin-json': 'plugin-json/json.js' }**

**如果您从以下位置下载插件：

official system.js plugin

现在我可以使用：

const config = require('./config.json');

任何在我的应用程序中。

而且由于它是 "systemjs" 的官方版本 - 伙计们，我觉得用它来加载 base_url 或其他端点等应用设置很舒服。

现在我需要弄清楚如何封装此逻辑以用于测试目的。可能需要文件本身 class 并替换特定测试用例的值。

如何在不使用 http.get 方法的情况下为 Angular 2 模块 bootstrap JSON 配置文件

How to bootstrap a JSON configuration file for an Angular 2 module without using a http.get approach

configuration

json

bootstrapping

typescript

angular