無法讀取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。

什麼可能導致這種情況？由於

來源

2016-08-17 Hongbo Miao

'從 './config.json' 進口配置;'。如果它在節點中，則可以只需要它。 const config = require（'./ config.json'）。 –

@SwarajGiri然後'console.log（config）;'和'console.log（config.api）;'會顯示'未定義' –

我沒有在該資源庫中看到任何名爲'config.json'的文件。 – Skam

您的配置文件是由內聯的WebPack，所以它遵循ES6模塊規範，並返回JSON作爲一個字符串，而不是如你所期望從對象節點。

你有沒有第一個使用webpack構建服務器的原因？

來源

2016-08-17 15:32:16 Gant

嗯，沒有具體的原因，只是因爲官方的角度/通用啓動器使用它，所以我只是用它直接快速啓動 –

謝謝！我也意識到'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

來源

2016-08-17 15:10:43

我曾考慮過，但這在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);

來源

2016-08-17 16:15:35

第一個不起作用，因爲樣板文件對JSON文件使用'loader-raw'。 – Gant

@Gant你是對的，我沒有克隆到回購，並使用我自己的使用json-loader的webpack配置。我的錯。 –

無法讀取config.json正確（打字稿，的WebPack）

回答

相關問題