jsonファイルのインポート中にエラーが発生しました

Question

Angular 2アプリケーションにインポートする必要があるjsonファイルがあります。このHow to Import json into TypeScriptの記事の手順を踏んだが、「SyntaxError: Unexpected token :」というエラーが表示されています。私は間違っていると思いますか？ここで

は私のコードです：

全エラー：

(index):28 Error: SyntaxError: Unexpected token : 
     at eval (<anonymous>) 
     at Object.eval (http://localhost:37967/Application/Settings.js:3:19) 
     at eval (http://localhost:37967/Application/Settings.js:92:4) 
     at eval (http://localhost:37967/Application/Settings.js:93:3) 
     at eval (<anonymous>) 
    Evaluating http://localhost:37967/appSettings.json 
    Evaluating http://localhost:37967/Application/Settings.js 
    Evaluating http://localhost:37967/Application/BaseComponent.js 
    Evaluating http://localhost:37967/Application/Components/Home/Home.js 
    Evaluating http://localhost:37967/Application/Module.js 
    Evaluating http://localhost:37967/Application/Startup.js 
    Error loading http://localhost:37967/Application/Startup.js 

Settings.ts：

/// <reference path="../scripts/typescriptdefinitions/typings.d.ts" /> 
.. 
import * as appSettings from '../../appSettings.json'; 
.. 
    public static get AppSettings(): any{ 
     return <any>appSettings; 
    } 
.. 

typings.d.ts：

declare module "*.json" { 
    const value: any; 
    export default value; 
} 

appSettings.json：

{ 
    "AppSettings": { 
    "Url": ... 
    } 
} 

私は、ネットワークパネルをチェックしました、ファイルが200 OKがロードされています。また、jsonの内容は有効なjsonです。

Answer 1

参照する例は、CommonJS環境（おそらくNode）で実行するように設計されています。そのような場合、importステートメントはrequireステートメントになります。ノード内でrequire("foo.json")を実行している場合、ノードは完全に細かいです。ノードは、を実行しないでください。 JSONファイルを実行してください。しかし

、あなたがノードでCommonJSモジュールをロードしていない場合は、あなたは通常はJSONファイルは、特別扱われなければならないバンドラやローダーを伝える必要があります。そうしないと、ツールはあなたがコードを読み込んでいると思って、それを実行しようとします。

SystemJSを使用していると私に示唆しているエラーメッセージです。 SystemJSを使用すると、ロードしようとしているファイルは、jsonローダーをロードする必要がありますSystemJSを教えてくれますmetaであなたのSystemJSの構成を設定したい：

meta: { 
    "path/to/file": { 
     loader: "json", 
    }, 
    }, 

そして、あなたはsystemjs-plugin-jsonをインストールする必要があります。 jsonとしてロードする必要がある複数のファイルがある場合は、path/to/fileにワイルドカードを含めることができます。たとえば、project/config/*があり、project/config/のすべてのファイルがJSONとして扱われます。残念ながら、SystemJSがサポートしているワイルドカードはあまりよく書かれていないので、あなたのために何が効果的か試してみる必要があります。