web-dev-qa-db-fra.com

Angular 2 routage renvoyant une page vierge, pas d'erreur

Je suis en train de mettre à jour notre base de code SPA d'angular 2.0.0 à 2.4.10 (routeur angulaire 3.4.10). Mais à présent, la chose la plus étrange se produit: certaines routes fonctionnent parfaitement, mais certaines ne renvoient rien (comme un composant vierge) et absolument AUCUN ERREUR n'est enregistré sur aucun de mes fronts de débogage.

Voici la version distillée de notre implémentation: Les principaux "sous" itinéraires sont chargés paresseux, mais les itinéraires enfants suivants sont chargés avec impatience par le module chargé.

Exemple:

www.hostname.com/clients <- Lazy load
www.hostname.com/clients/details <- Eager loaded by the "Clients" module

J'ai le code suivant sur la route principale de l'application (src/app/app.routing.ts):

import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: 'clients', loadChildren: () => System.import('../clients/clients.module').then(m => m['ClientsModule']) },
  ...moreRoutes
];

export const appRouting = RouterModule.forRoot(appRoutes);

Et ensuite dans (src/clients/clients.routing.ts):

import { Routes, RouterModule } from '@angular/router';
import { Clients } from './'; // I have a index.ts file that exports the component plus some more stuff, so loading from this relative path works just fine

const clientRoutes: Routes = [
  { path: 'test', component: Clients }, // for testing porpuses
  { path: '', component: Clients }, // "Normal" route that should work like in all my other modules
  ...MoreRoutes
];

export const clientsRouting = RouterModule.forChild(clientRoutes);

le paramètre clientsRouting est ensuite importé dans le module Clients et transmis au décorateur imports: [].

Maintenant, la route www.hostname.com/clients renvoie juste un composant vierge. Mais la route www.hostname.com/clients/test fonctionne normalement

Maintenant, je n'ai absolument aucune idée de ce qui ne va pas. J'ai même comparé deux modules distincts mais similaires (un qui fonctionne et l'autre qui ne fonctionne pas), mais je n'ai trouvé aucune différence de codage significative.

Tous les composants du projet sont mis en œuvre de cette manière et fonctionnent correctement sous Angular 2.0.0.

Edit: Quelques infos supplémentaires:

  • J'utilise WebPack avec des plugins pour Uglyfy, Lint et quelques autres modifications mineures. Pendant que nous sommes en développement, nous utilisons Webpack-dev-server (2.9.6) pour écouter et recompiler le code. Nos deux configurations, pour la production et le développement, présentent ce problème. Je ne peux pas exécuter l'application sans passer d'abord par Webpack en raison de dépendances de bas niveau, mais je ne pense pas que Webpack soit le problème ici, je le mentionne juste au cas où.
  • Aucune redirection ne se produit lorsque ce bogue survient, il reste là, comme si de rien n'était (littéralement).
  • Mon objectif principal ATM est que la sous-route test pointe vers le même module que la route '' et que cela fonctionne, alors que le '' direct ne le fait pas; Le suivi de la route avec { enableTracing: true } ne comporte aucune différence entre les deux.
angularangular2-routinglazy-loadingupgrade
2
Leo Bottaro

J'ai trouvé l'erreur:

L'un des modules que j'importais dans le module Clients importait un autre module de routage qui remplaçait la route '' vers un composant vide, d'où la page vierge.

Comment je l'ai trouvé:

En utilisant Augury , une extension chrome permettant de déboguer les applications Angular, je pouvais constater que l’arborescence de routeurs enregistrait quelque chose qu’elle ne devrait pas. Au moment où j'ai supprimé l'itinéraire de l'autre module, tout a été corrigé.

J'aimerais prendre un moment pour remercier toutes les personnes qui ont essayé d'aider et pour les conseils que j'ai reçus ici, tout cela était très utile! Je vous remercie!

7
Leo Bottaro

En bref (juste un indice cependant)

J'ai rencontré un problème similaire (également après la mise à niveau de Angular BTW), en raison de ce simple fait: L'ordre d'importation importe! Mauvaise idée d'essayer d'être bien rangé lors de la mise à niveau des dépendances.

Plus de détails

Parce que mon module de routage de base ressemble à quelque chose comme

@NgModule({
  imports: [RouterModule.forRoot([{ path: '**',   redirectTo: ''}])],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Lorsque je l'ai déplacé avant les autres modules de fonction des importations, toute demande était automatiquement redirigée vers '' et n'a jamais chargé aucun composant. Sans aucune erreur.

@NgModule({
  imports: [
    AppRoutingModule,  // <= need to move that one at the end
    SomeFeatureModule,
  ],
  // more stuff ...
})
export class AppModule {}

Bien sûr, ceci n'est qu'un indice de ce qui aurait pu mal se passer dans votre cas, je ne saurais le dire à coup sûr sans regarder le code en entier.

0
Arnaud P