无法读取config.json正确（打字稿，的WebPack）

问题描述：

UPDATE：这个问题是由this PR 无法读取config.json正确（打字稿，的WebPack）

固定的是，之所以洁具，问题出来和正常纯JavaScript的方式不能解决这可能是因为server.ts正在使用TypeScript和Webpack。检查Gant的答案。并在github上跟踪this issue。

我使用angular/universal-starter作为首发。我有一个文件config.json

{ 
    "api": "123" 
}

当我读到config在server.ts：

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

它显示这个终端：

{ 
    "api": "123" 
}

然而，当我尝试读取config.apiserver.ts：

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。

什么可能导致这种情况？由于

'从 './config.json' 进口配置;'。如果它在节点中，则可以只需要它。 const config = require（'./ config.json'）。 –

@SwarajGiri然后'console.log（config）;'和'console.log（config.api）;'会显示'未定义' –

我没有在该资源库中看到任何名为'config.json'的文件。 – Skam

答

您的配置文件是由内联的WebPack，所以它遵循ES6模块规范，并返回JSON作为一个字符串，而不是如你所期望从对象节点。

你有没有第一个使用webpack构建服务器的原因？

嗯，没有具体的原因，只是因为官方的角度/通用启动器使用它，所以我只是用它直接快速启动 –

谢谢！我也意识到'console.log（config）;'实际上返回一个字符串而不是一个json！这就是为什么我尝试'JSON.parse'然后它可以工作 –

@HongboMiao这是一件非常奇怪的事情。它打破了在节点下运行的一些假设，并增加了不需要捆绑（仅编译）的东西的编译时间。我会看看我以后能否解决问题。 – Gant

答

UPDATE：这个问题是由this PR

固定

是，之所以洁具，问题出来和正常纯JavaScript的方式解决不了，可能是因为该服务器。 ts正在使用TypeScript和Webpack。检查Gant的答案。并在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

我曾考虑过，但这在JS中不应该是真的。也许这是打字稿的事情。请将Typescript标签添加到您的问题中。并使标题更具描述性，例如“无法在TypeScript中解析JSON文件”以避免更多的降价。 – amingilani

@amingilani哦，你明白了，我想这就是为什么会发生这个问题！ –

@amingilani看到我的回应，样板使用webpack编译服务器，并且typescript的模块加载器自动内联JSON，以便获得ES6行为。节点需求从未实际使用。 – Gant

答

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

使用方法2种

与+的NodeJS测试的WebPack两种方法。

方法1种

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

方法2

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

第一个不起作用，因为样板文件对JSON文件使用'loader-raw'。 – Gant

@Gant你是对的，我没有克隆到回购，并使用我自己的使用json-loader的webpack配置。我的错。 –

无法读取config.json正确（打字稿，的WebPack）

相关推荐