Fehler beim Importieren der JSON-Datei

Question

Ich habe eine JSON-Datei, die ich in meine Angular 2-Anwendung importieren muss. Ich habe Schritte aus diesem How to Import json into TypeScript Artikel gefolgt, aber ich bekomme einen "SyntaxError: Unexpected token :" Fehler. Was denkst du, mache ich falsch?

Hier ist mein Code:

Voll Fehler:

(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": ... 
    } 
} 

ich den Netzwerk-Panel und die Datei mit 200 OK geladen wird überprüft haben. Auch die json Inhalte sind gültig json.

Answer 1

Das Beispiel, auf das Sie sich beziehen, wurde entworfen, um in einer CommonJS-Umgebung, vermutlich Node, zu laufen. In diesem Fall wird die import-Anweisung eine -Anweisung. In Knoten tun require("foo.json") ist völlig in Ordnung: Node weiß, dass es nicht versuchen sollte die JSON-Datei ausführen.

Wenn Sie jedoch keine Commonjs Modul in Knoten, Sie in der Regel Notwendigkeit zu sagen, die Bündler oder Loader, der eine JSON-Datei behandelt werden müssen speziell geladen. Andernfalls wird das Tool denken, dass Sie Code laden, und versuchen, es auszuführen.

Die Fehlermeldungen, die Sie mir vorschlagen, dass Sie SystemJS verwenden. Mit SystemJS möchten Sie Ihre SystemJS Konfiguration mit einem meta setzen, die SystemJS wird zeigen, dass die Datei, die Sie sollten zu laden versuchen, mit dem json Lader geladen werden:

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

Und Sie müssen haben systemjs-plugin-json installiert. path/to/file könnte einen Platzhalter enthalten, wenn Sie mehrere Dateien haben, die Sie laden müssen, wie json. Zum Beispiel habe ich project/config/*, so dass alle Dateien in project/config/ als JSON behandelt werden. Leider sind die von SystemJS unterstützten Wildcards nicht sehr gut dokumentiert. Sie müssen also versuchen, herauszufinden, was für Sie funktioniert.