无法正确读取 config.json（TypeScript、Webpack）

Question

更新：问题已由this PR修复

---

请注意，问题出现并且普通纯 JavaScript 方法无法解决的原因可能是因为 server.ts 正在使用 TypeScript 和 网页包。检查甘特的答案。并在 github 上跟踪 this issue。

我使用angular/universal-starter 作为启动器。我有一个文件 config.json

{
  "api": "123"
}

当我在 server.ts 中阅读 config 时：

import * as config from '../config.json';
// const config = require('../config.json');  will be same result
console.log(config);

它在终端中显示：

{
  "api": "123"
}

但是，当我尝试在 server.ts 中读取 config.api 时：

import * as config from '../config.json';
// const config = require('../config.json');  will be same result
console.log(config.api);

它显示undefined。

这是我的文件夹结构（其他部分相同，如angular/universal-starter）。

my-app
  - config.json
  + src
    - server.ts

当我启动应用程序时，我使用npm start。

什么可能导致这种情况？谢谢

Answer 1

更新：问题已由this PR修复

---

请注意，问题出现并且普通纯 JavaScript 方法无法解决的原因可能是因为 server.ts 正在使用 TypeScript 和 网页包。检查甘特的答案。并在 github 上跟踪 this issue。

我发现了问题：

import * as config from '../config.json';
// const config = require('../config.json'); also works


const json = JSON.parse(config);  // <- need this line
console.log(json.api);  // 123

Answer 2

方法一是错误的，因为它与问题配置不匹配。有问题的 webpack 配置对 json 文件使用 raw-loader，而这个答案是使用 json-loader。

使用方法2

这两种方法都用 nodejs + webpack 测试过。

方法一

var config = require(__dirname + '/config.json');
console.log(config['api']);

方法二

var config = JSON.parse(fs.readFileSync(__dirname + '/config.json', 'utf8'));
console.log(config.api);

Answer 3

您的配置文件由 webpack 内联，因此它遵循 ES6 模块规范并将 JSON 作为字符串返回，而不是您期望从 Node 获得的对象。

您首先使用 webpack 构建服务器有什么原因吗？