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

Question

更新：问题已由 this PR

修复

Be ware of that the reason that the problem comes out and normal pure JavaScript ways cannot solve it could be because that server.ts is using TypeScript and Webpack. Check Gant's answer. And track this issue on github.

我正在使用 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

修复

Be ware of that the reason that the problem comes out and normal pure JavaScript ways cannot solve it could be because that server.ts is using TypeScript and Webpack. Check Gant's answer. And track this issue on github.

我发现了问题：

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 内联，因此它遵循 ES6 模块规范和 returns JSON 作为字符串而不是您期望从 Node 获得的对象。

你首先使用 webpack 构建服务器是有原因的吗？

Answer 3

Method 1 is wrong as it does not match the question configuration. The webpack configuration in question use raw-loader for json file, while this answer is using json-loader.

使用方法二

两种方法均使用 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);

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

Cannot read config.json correctly (TypeScript, Webpack)

node.js

typescript

webpack

angular2-universal

angular