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

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

config.json

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

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

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';

这并不理想，因为我必须在构建脚本中创建类（或替换属性）。（这正是我对config.json文件的想法）

---

我仍然更喜欢config.json文件方法，因为它不会干扰TypeScript编译器。欢迎您提出任何建议，并衷心感谢

您正在使用webpack吗？如果你是，你可以

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

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

在网页包配置中，您需要json加载程序

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

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

如果上面的链接不够清晰，只需在System.js conf中添加一个映射，如下所示：

map:{'pluginjson'：'https://unpkg.com/systemjs-plugin-json“}

*

*（使用外包装）

或

map:{'pluginjson'：'pluginjson/json.js'}

**

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

现在我可以使用：

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

在我的应用程序中有任何内容

由于它是“systemjs”的官方版本，我觉得使用它来加载应用程序设置（如base_url或其他端点）很舒服

---

现在我需要弄清楚如何封装这个逻辑以进行测试。可能需要在其自己的类中使用该文件并替换特定测试用例的值。

您可以了解Angular CLI如何管理其

.environment.ts

文件，这是解决此问题的一个方法-该链接仅指构建过程，我需要应用程序运行时中的变量。我已经有了构建所需的环境变量，主要问题是在应用程序中注入这些变量。在这种情况下，这将很大程度上取决于你如何部署应用程序，你还没有提到。为了在静态部署的Angular应用程序中获得特定于环境的状态，我们使用了服务器端includes，但不清楚这是否是您的选择。我实际上应该对部署过程不知道。关键是，无论首先运行什么构建，它都会创建一个config.json文件，Angular应用程序必须使用该文件，而不使用http。想象一下，应用程序中必须包含一块现有的代码，你不必创建它，它已经存在了。我正在使用System.js，但如果它与webpack一起工作，我想我知道如何在System.js上调整它。让我检查一下，这是有效的，是的，这很可能是我一直在寻找的。顺便问一下，让angular直接解释json文件会不会有任何风险？我只是好奇为什么这个支持不是从盒子里出来的。你所描述的是相当开放的。。。。某个json文件的xhr。角度对你的js来说是不可知的。jonrsharpe提供了“开箱即用”的答案。如果上述方法不适用于systemjs，并且您确实需要一个独立的xhr请求，那么请考虑：因此，您可以不使用doRunYourBootstrapCode（）而使用httpGet（）执行doLoadYourJsonWithHttpGet（）。然后（json=>{doRunYourBootstrapCode（json）；}）；我会尝试通过systemjs加载它，以及您首先用于“打包”的任何东西，因为它只需一次调用。祝你好运。太棒了@eotoole，这正是我想要的。如果我将Angular理解为一组“包含的”javascript块/函数，那么您需要指示模块加载器如何加载json是有道理的。我添加System.js版本作为补充答案。