Angulaire 6 - Charge JSON de locaux

Je suis en train de charger un local JSONfile de deux façons.

C'est mon fichier json:

{
  "imgsesion": "fa_closesesion.png",
  "texthome": "volver a la home",
  "logo": "fa_logo.png",
  "menu": {
    "background": "orange",
    "link1": "ESCRITOR",
    "link2": "MÚSICO",
    "link3": "AYUDA ADMIN",
    "submenu": {
      "link1": {
        "text1": "novelas",
        "text2": "obras de teatro"
      },
      "link2": {
        "text1": "compositor",
        "text2": "intérprete"
      }
    }
  }
}
  • Voie 1: À L'Aide De Http

C'est mon fichier de service (générale.service.ts)

  getContentJSON() {
    return this.http.get('assets/json/general.json')
    .map(response => response.json());
  }

Cette façon de travail ok, mais affiche l'erreur suivante dans le navigateur web de la console:

ERROR TypeError: Cannot read property 'menu' of undefined
  • Chemin 2: À L'Aide De HttpClient

C'est mon fichier de service (générale.service.ts)

  getContentJSON() {
    return this.httpClient.get("assets/json/general.json");
  }

Il ne fonctionne pas car je ne trouve pas le général.fichier json, il passe par le contrôle de l'erreur et il me donne une erreur 404

C'est le fichier de composant (app.composante.ts)

export class AppComponent implements OnInit {
  contentGeneral: any;

ngOnInit() {
this.getContentJSON();
}

  getContentJSON() {
    this.generalService.getContentJSON().subscribe(data => {
      this.contentGeneral = data;
    }, //Bind to view
    err => {
      //Log errors if any
      console.log('error: ', err);
    });
  }

}

C'est le fichier de modèle (app.component.html):

<a href="#" routerLink="/home" class="linkHome">{{contentGeneral.texthome}}</a>

<div class="submenu" *ngIf="linkWrite.isActive || isSubMenuWriter">
    <span class="d-block text-right small">{{contentGeneral.menu.submenu.link1.text1}}</span>
    <span class="d-block text-right small">{{contentGeneral.menu.submenu.link1.text2}}</span>
</div>

C'est mon erreur:

Dans l'app.composante.ts, j'ai ajouter de l'importation:

import * as data_json from './assets/json/general.json';

Mais quand je lance ng servir il me donne l'erreur suivante:

Angulaire 6 - Charge JSON de locaux

Comment j'ai pu le résoudre?

  • Il y a une autre façon de le faire. Vous pouvez créer un exporté json à l'intérieur d'un .ts fichier et l'importer dans votre composant. Ensuite, vous pouvez accéder à thet json dans votre composante
InformationsquelleAutor Eladerezador | 2018-06-19