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:
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
Vous devez vous connecter pour publier un commentaire.
La solution la plus simple:
Mise à jour importante!
J'ai trouvé que cette méthode s'arrête de fonctionner à nouveau Angulaire versions, à cause de cette erreur:
Pour en faire des œuvres, allez dans le tsconfig.json et ajouter ces deux, à l'intérieur de
compilerOptions( tsconfig.json ) :
Après le changement, exécutez à nouveau le
ng serve
.Si vous utilisez uniquement la première option, vous pouvez obtenir une erreur comme ceci:
(J'ai trouvé cette très bonne réponse ici (https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/))
De cette manière...
J'ai eu de la ligne rouge et a reçu l'erreur de module non trouvé par angulaire.
Après quelques RND j'ai eu une autre manière qui fonctionne pour moi. Espérons qu'il peut aider quelqu'un.
JSON.stringify(data)
, je suppose.import data = require('your_file.json')
Voir cet article:
vous pouvez utiliser l'extrait de code suivant:
Cela se produit parce que vous demandez un fichier JSON en mode asynchrone, vous pouvez gérer avec la sécurité de la navigation de l'opérateur ou à l'aide de ngIf,
ou tout simplement d'importer le fichier JSON dans votre composant et attribuer sampleJSON.