Typescript-Compilerfehler beim Importieren der JSON-Datei

Also der code ist einfach:

Anrufe.json

{"SERVER":{
    "requests":{
      "one":"1"
    }
} }

Datei.ts

import json = require('../static/calls.json');
console.log(json.SERVER);

den erzeugten javascript-korrekt ist und bei der Ausführung der node-js-server, die Konsole log-json.SERVER gibt ' {- Anfragen: { eins: '1' } }', wie es sollte.

Den typescript-compiler (commonjs) allerdings irgendwie nicht besonders wie diese situation wirft: "Cannot find module '../static/Anrufe.json'".

Natürlich versuchte ich das schreiben ein .d....ts-Datei, wie hier:

declare module '../static/calls.json'{
    var exp:any;
    export = exp;
}

diese dann natürlich wirft: "Ambient-Modul-Erklärung angeben können relative Modul-name".

Ich habe auch versucht verschiedene Varianten, wie:

declare module 'calls.json' {
    import * as json from '/private/static/calls.json';
    export = json;
}

dann erforderlich ist:

import json = require('calls.json');

Keiner richtig arbeiten und haben Ihre eigene kleine compiler-Fehler 🙂

Möchte ich eine externe .json-Datei, weil ich mit commonjs serverside und amd) und ich möchte eine einzelne Datei für das laden von Konstanten.

InformationsquelleAutor der Frage Ken | 2015-10-05

  1. 64

    Verwenden var statt import.

    var json = require('./calls.json');

    Die Sie laden, eine JSON-Datei, nicht ein Modul, so import sollte nicht verwendet werden, ist in diesem Fall. Wenn var verwendet wird, require() behandelt wird wie eine normale Funktion wieder aufnehmen.

    Wenn Sie eine Node.js definition, sollte alles einfach funktionieren, sonst require müssen definiert werden.

    InformationsquelleAutor der Antwort thoughtrepo

  2. 18

    Andere Lösung ist, zu ändern data.json zu data.ts - und export, wie dies

    export default {
  "key" : {
    ...
  }
}

    - und importieren wie man es erwarten würde:

    import { default as data } from './data'

    InformationsquelleAutor der Antwort phi

  3. 17

    Diese können auch erfolgen, indem import - Anweisung, wenn mit webpack v2 die ist schon gepackt mit json-loader.

    Beachten Sie, dass dies nicht async

    import data from './data.json';//Note that this is not async

    Auch, in Ihren typings.d.ts - Datei fügen Sie die folgende Platzhalter-Modul zu vermeiden, Typoskript Fehler sagen: Cannot find module

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

    Für alle interessierten in async Einfuhren, überprüfen dieser Artikel von 2uality

    InformationsquelleAutor der Antwort sabithpocker

  4. 8

    TS 2.9 zusätzliche Unterstützung für gut getippt json importiert. Nur hinzufügen:

    {
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

    in Ihrem tsconfig.json oder jsconfig.json. Importiert nun wie:

    import json = require('../static/calls.json');

    und 

    import * as json from '../static/calls.json';

    sollte aufgelöst werden, und es müssen angemessene Testungen zu!

    InformationsquelleAutor der Antwort Matt Bierner

  5. 2

    Als der Typoskript 2.9 können Sie importieren JSON-Datei nativ ohne zusätzliche hack/loader benötigt.

    Folgende Auszug ist kopiert vom link oben.

    ...Typoskript ist nun in der Lage zu importieren JSON-Dateien als Eingabe-Dateien bei Verwendung des Knoten-Strategie für moduleResolution. Dies bedeutet, dass Sie verwenden können json-Dateien als Teil des Projekts, und Sie werden gut getippt!

    ./src/settings.json

    {
    "dry": false,
    "debug":

    ./src/foo.ts

    import settings from "./settings.json";

settings.debug === true;  //Okay
settings.dry === 2;       //Error! Can't compare a `boolean` and `number`

    InformationsquelleAutor der Antwort doomleika

  6. 0
    For Angular 6 it can work with simple HTTP get call as below

Service
//interface, could be Array , object 
export interface ResultJSON{

}
 //Read JSON file for 3DWide
  getJSON() {
    return this.http.get(this.filepathUrl);
  }

Component :import both service and interface and use as below
resultJSON :ResultJSON;
 this
      .testService
      .getJSON()
      .subscribe((data: ResultJSON) => {
           this.resultJSON= data;
           console.log(this.resultJSON); 


         });

    InformationsquelleAutor der Antwort user2112373

Schreibe einen Kommentar