it-swarm.com.de

Angular 2 Routing, das leere Seite zurückgibt, keine Fehler

Ich aktualisiere gerade unsere SPA-Codebasis von Angular 2.0.0 auf 2.4.10 (Angular Router 3.4.10). Aber jetzt passiert das Seltsamste: Einige Routen funktionieren einwandfrei, aber einige Routen geben nichts zurück (wie eine leere Komponente), und an keiner meiner Debugging-Fronts werden absolut KEINE FEHLER protokolliert

Hier ist die destillierte Version unserer Implementierung: Die Haupt- "Sub" -Routen werden verzögert geladen, aber die folgenden untergeordneten Routen werden vom geladenen Modul sofort geladen

Beispiel:

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

Ich habe den folgenden Code auf meiner Haupt-App-Route (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);

Und dann in der (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);

die clientsRouting-Konstante wird dann in das ClientsModule importiert und an den imports: [] -Dekorator übergeben.

Jetzt gibt der route www.hostname.com/clients nur eine leere Komponente zurück. Aber die Route www.hostname.com/clients/test funktioniert normal

Jetzt habe ich absolut keine Ahnung, was los ist. Ich habe sogar zwei verschiedene, aber ähnliche Module verglichen (eines, das funktioniert, und eines, das nicht funktioniert), aber keine signifikanten Codierungsunterschiede festgestellt.

Alle Komponenten im Projekt sind so implementiert und funktionieren in Angular 2.0.0 einwandfrei

Bearbeiten: einige weitere Infos:

  • Ich benutze ein Webpack mit einigen Plugins für hässliche, fusselige und andere kleinere Verbesserungen. In-Dev verwenden wir den Webpack-Dev-Server (2.9.6), um nach dem Code zu suchen und ihn erneut zu kompilieren. In unseren beiden Konfigurationen für Produktion und Entwicklung tritt dieses Problem auf. Ich kann die App nicht ausführen, ohne dass sie zuerst das Webpack durchläuft, da es nur geringe Abhängigkeiten gibt, aber ich denke nicht, dass das Webpack das Problem ist. Ich erwähne es nur für den Fall.
  • Es gibt keine Weiterleitungen, wenn dieser Fehler auftritt. Er befindet sich nur dort, als wäre (wörtlich) nichts passiert.
  • Mein Hauptaugenmerk bei Geldautomaten liegt darauf, dass die Unterroute test auf dasselbe Modul verweist wie die Route '' und funktioniert, während die direkte Route '' nicht funktioniert. Das Verfolgen der Route mit { enableTracing: true } macht keinerlei Unterschied zwischen den beiden.
2
Leo Bottaro

Ich habe den Fehler gefunden:

Eines der Module, die ich in das Modul Clients importierte, importierte ein anderes Routing-Modul, das die ''-Route in eine leere Komponente überschrieb, daher die leere Seite.

Wie ich es gefunden habe:

Mit Augury , einer Chrome-Erweiterung zum Debuggen von Angular Apps, konnte ich feststellen, dass der Router-Tree etwas registriert hat, was er nicht sollte. In dem Moment, als ich die Route des anderen Moduls entfernte, war alles repariert.

Ich möchte mir einen Moment Zeit nehmen und mich bei allen bedanken, die versucht haben zu helfen und für die Tipps, die ich hier bekommen habe, war alles sehr hilfreich! Vielen Dank!

7
Leo Bottaro

Kurz gesagt (nur ein Hinweis)

Ich habe ein ähnliches Problem (auch nach dem Upgrade von Angular BTW), aufgrund dieser einfachen Tatsache konfrontiert: Importauftragsangelegenheiten! Es ist eine schlechte Idee, beim Aktualisieren von Abhängigkeiten aufgeräumt zu werden.

Mehr Details

Weil mein Basis-Routing-Modul ungefähr so ​​aussieht

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

Als ich es vor die anderen Funktionsmodule in den Import verschoben habe, wurde jede Anforderung automatisch zu '' umgeleitet und hat keine der Komponenten geladen. Ohne Fehler.

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

Natürlich ist dies nur ein Hinweis darauf, was in Ihrem Fall schief gelaufen sein könnte. Ich kann es nicht genau sagen, ohne den gesamten Code zu betrachten.

0
Arnaud P