Bonjour ! 

Je suis le cours d'Angular en parallèle du TP Tour of heroes, et je bloque sur le paramétrage des routes.

https://openclassrooms.com/fr/courses/4668271-developpez-des-applications-web-avec-angular/5088826-gerez-la-navigation-avec-le-routing#/id/r-5089195

Dans appModule j'ai bien

const appRoutes: Routes = [  
{ path: ...... },
{ path: 'appareils/:id', component: SingleAppareilComponent },
];

Dans singleAppareilComponent

import { AppareilsService } from '../Services/appareils.service';

export class SingleAppareilComponent implements OnInit {
  name: string = 'Appareil';
  status: string = 'Statut';
  
  constructor(private appareilService: AppareilsService) { }


}

Jai cette erreur dans la console

6 jj:1 GET http://localhost:4200/appareils/runtime.js net::ERR_ABORTED 404 (Not Found)

Pourtant je n'ai aucune erreur dans le terminal de VS code

Une idée d'où vient le problème ? 

Merci !

-
Edité par YoanBo 1 juillet 2020 à 18:13:02

Bonjour,

Il n'arrive pas à trouvé la page parce que sur ton route tu essaies de naviguer vis à (this.route.snapshot.params[]) et à l’occurrence "id" que tu n'as pas difinit dans ton ngOnInit() methode.

Salut ! 

J'ai pourtant suivi le cours, et à ce moment là normalement il est dit

Pour l'instant, si vous naviguez vers  /appareils/nom , peu importe le nom que vous choisissez, vous avez accès à  SingleAppareilComponent .

D'ailleurs je n'ai pas encore implanté this.route.snapshot.params[]

Suivez bien le cours 

Et ajoute : import {Component} from '@angular/core'; dans ton SingleAppareilComponen

Je l'ai créé via le CLI, l'import est automatique.

J'ai refait le code 2 fois, point par point.

et je ne trouve pas d'explication pour l'erreur 404 sur runtime.js.

Je n'ai pas ce fichier dans le dossier

404 c t'un code pour dire qu'il n'arrive pas à trouver le fichier demander. Regarde bien si t'as importais SingleAppareilComponen  dans les déclarations de ton appModule 

Suit bien les instructions du cours ou met le code sur github et partage le lien du repository.

J'ai bien Singleappcomponent dans AppModule

https://github.com/Yoan-B/Cours-angular-opencl

Regarde bien ce que t'as comme Repo tu ne partages qu'une partie du code je veux lancer ça et voir ce que ça donne. 

Partage tout le projet !

.. Je n'utilise pas encore git.

Je pensais mettre directement les fichiers sur github.com, mais pas possible de mettre des dossiers faut passer par git (enfin je crois)

et c'est un cours complet encore pour utiliser la console ...

Il y a un autre moyen ?

 (J'ai téléchargé github et git, fait le 1er commit, et au moment de push il y a des erreurs)

Yoan@Yoan-PC MINGW64 ~/Desktop/WEB/Formation/Angular/Test1/mon-premier-projet (master)
$ git push https://github.com/Yoan-B/Cours-angular-opencl.git master
To https://github.com/Yoan-B/Cours-angular-opencl.git
 ! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'https://github.com/Yoan-B/Cours-angular-opencl.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

Vu que t'as créer et initialiser ton repo tu devrais pouvoir ajouter facilement tout ton code sur github. fallait te positionner sur la racine du projet et faire un : git add . (et non choisir d'ajouter seulement quelques fichiers),

git status pour voir l'états de tes fichiers,

git commit -m "le message de ton commit" 

git log pour voir le commit que tu viens de faire et  s'assurer que tout va bien

git push pour envoyer ton code qui est en local sur ton dépo disant.

Pour installer git sur votre ordinateur.

Pour démarres ton projet en créant le dépôt et tout sur gitbub.

Utiliser les commandes de base et comment se positionner sur.

Apprendre un langage de programmation jusqu’à commencé à utiliser un de ses frameworks sans pour autant comprendre le terminal et savoir utiliser Git c pour moi sauter des étapes et ça va te fatiguer tout le temps.

Salut ! 

Oui j'ai pris le parti d'apprendre à utiliser git pus tard, du coup tu m'avances un peu

Donc j'ai bien créé le repo et push le tout (sauf node_module  qui est ignoré mais apparemment c'est normal)

https://github.com/Yoan-B/OpenCL-angular

Bonjour YoanBo,

je vient de voir votre code mais il me semble qu'aucune de vos routes ne marche correctement en faite (si vous entrez directement le route que vous voulez n'importe lequel comme url sur votre navigateur ça ne vas pas passer).

Rappelez vous le cours que vous suivez et le projet que vous avez lancer n'ont pas la même version Angular je pense que vous, vous êtes sur du Angular 9 (faites un ng --version pour voir). 

Donc la logique et la hiérarchie des choses peuvent changer (dèja je vois pas de app.routing.module.ts sur votre projet) essayer d'être sur la même version Angular que le cours sinon vous aurez beaucoup d'autres surprises comme ça.  

Normalement si vous ajoutez un bouton avec comme route appareils/:id vous serais rediriger vers le component single-apparail-component. 

Ajouter : 

<button routerLink="/appareils/:id">View</button>

Sur apparelViewComponent pour voir. 

Alors je suis sur Angular 9, et j'ai été voir le post des modifs (sur le forum) et il n'y a pas cette incompatibilité

J'ai testé mes routes directement dans l'url (/appareils et /auth) et ça fonctionne bien.

Le bouton marche (merci) mais savez-vous pourquoi ça ne fonctionne pas directement dans l'URL ?

Merci !