Discussion :

[Gluups]

Bonjour tout le monde,
Je suis en train de potasser un projet GlobalWeather, qui affiche la météo.
Je rame un peu mais ça affichait toujours quelque chose, ne serait-ce que des erreurs.
Comme il manquait des éléments, j'ai comparé page par page avec le projet modèle, pour rapatrier ce qui manque.
Eh bien maintenant, mon projet n'affiche que le fichier index.html, qui se trouve dans le répertoire src.
Dans la source de la page je reconnais bien la balise <app-root>
D'habitude ça renvoie au fichier app.component.html du répertoire src/app, qui contient la balise router-outlet

En clair, la page est toute blanche, si ce n'est que le titre apparaît sur la barre de titre.

Le fichier main.ts est conforme, contrairement à celui de quelqu'un qui a vécu la même mésaventure.
polyfills.js, rien à redire.

Bon ... Est-ce que je vais devoir tous les faire ?

Ah, sur l'écran de réponse du compilateur, dans le projet qui fonctionne je vois ça :

i ｢wdm｣: Compiled successfully.
i ｢wdm｣: Compiling...
i ｢wdm｣: wait until bundle finished: /weather

Dans celui qui ne fonctionne pas je dois me contenter de ça :

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

ce qui somme toute paraît assez habituel, mais je compare avec ce qui marche ...

Ah un petit coup d'œil à app-routing.module.ts, qui est pareil des deux côtés :

Code TypeScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WeatherComponent } from './weather/weather.component';
 
const routes: Routes = [
  { path: '', redirectTo: 'weather', pathMatch: 'full' },
  { path: 'weather', component: WeatherComponent },
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

[krakatoa]

/weather

vire tout le code html de weather.component.html
et met par exemple "test"

à l'écran ça donne quoi ?




peut être dans app.modulte.ts il manque

declarations: [weatherComponent]

[Gluups]

Ben ... Pareil.
D'ailleurs, là on en est à index.html
Après seulement vient app.component.html, dont la balise router-outlet réagit à app-routing.module.ts
Depuis j'ai recommencé le projet et ça marche, mais je suis épaté qu'on puisse déraper autant en copiant des choses en provenance du projet original qui fonctionne.
D'ailleurs, c'est pratique, en haut de chacun de ces fichiers, d'écrire son nom, pour s'assurer qu'on voit les noms apparaître dans l'ordre à l'écran à la fin.

Ce genre de dérapage donne l'occasion de faire des découvertes, par exemple, j'ai appris qu'il existe une notion de décoration expérimentale, et pas dans des petits recoins isolés, carrément dans export class.
Si dans tsconfig.json, dans compiler.Options, on n'a pas "experimentalDecorators": true, on voit débarquer dans les résultats de compilation des erreurs avec une littérature du style les décorations expérimentales sons susceptibles de ne plus être supportées dans des versions futures.
Si on est supposé faire attention à ce point, ça serait une bonne idée de ne pas réserver ça à celui qui aura laissé traîner ses pattes à un endroit où en est invité à éviter de les mettre d'habitude.

Du coup, ce projet va m'avoir fait explorer pas mal de ... enfin ... plusieurs circonstances inhabituelles.
Est-ce que je continue à en faire l'inventaire, ou je prie pour ne pas tomber dessus en circonstances de travail normal ?

Le plus joli c'est que je ne me rappelle avoir touché à rien en dessous de src, sans y être invité par les instructions de montage du projet.

[dukoid]

c'est en se perdant qu'on apprend, c'est formateur.
après tout dépend du temps dont tu disposes. je dirais laisse tomber.


un petit test:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
ng g c test-comp--module=app
 
app.routing.ts
{ path: 'test', component: TestCompComponent },
 
app.component.html
<test-comp></test-comp>
 
 
/test

[Gluups]

Une piste ...

Quand le routage ne s'exécute pas, il faut afficher la console.

Sous Firefox : F12.

Ça peut afficher des indices précieux, comme par exemple une faute de syntaxe dans app-routing.module.ts