Question

我在root上有一个json文件：

config.json

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

在我的服务类中，我想以这种方式使用它：

private productsUrl = config.base_url + 'products';

我发现大量的帖子都有一个解决方案需要http.get请求加载一个文件来获取一个变量或者过时的angular.js解决方案（角度1）

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

在我看来，我原本预计至少bootstrapping函数能够提供这种功能，如：

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编译器。任何想法如何做都是受欢迎的，非常感谢！

Answer 1

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

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

如果上面的链接不够清晰，只需将地图添加到System.js conf中即可。像这样：

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

任何我的应用程序。

因为它来自＆＃34; systemjs＆＃34; - 大家好，我觉得用它来加载像base_url或其他端点这样的app设置很舒服。

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

Answer 2

您使用的是webpack吗？如果你是，你就可以做到

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

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

在您的webpack配置中

，您将需要json-loader

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

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

2 个答案: