Angular Routenkonfiguration mit mehreren Modulen

Hi,

ich stehe vor einem kleinen Problem mit dem Routing von Angular. Die App hat zwei Eintrittspunkt bzw. 3: '', '/login' und '/home'. Startet der Benutzer bei '', wird er zur Login-Seite geleitet. Von der Loginseite kommt er nach erfolgreicher Anmeldung zur Homeview oder er kann direkt zur Homeview, wenn er über gültige Anmeldedaten (z.B. in Cookies) verfügt.
Darüber hinaus soll es natürlich möglich sein, die Seite neu zu laden (f5) oder URLs zu verschicken, welche der Gegenüber dann einfach öffnen kann und an der richtigen Stelle landet.

Login und Home sind jeweils in einem separaten Feature-Modul, '' ist im AppModul, welches das Root-Modul ist. Die Homeview bzw. das ganze Modul beinhaltet weitere Komponenten, aber das ist derzeit nicht von Belangen.

Könnt ihr mich helfen diese Routenkonfiguration herzustellen? Ich kriege es einfach nicht hin. Das "enableTracing" hilft leider kein Stücken. Die einzige Ausgabe ist die angefragte URL und die ID. Die Information wusste ich auch vorher schon. Es wäre interessant zu wissen, welche Routen Angular ausprobiert hat und welche verfügbar sind. So was wäre hilfreich, aber so... weiß ich gerade nicht, was ich von diesem "Debugging" haben soll.

Was habe ich bereits ausprobiert? Ich habe lazyLoading probiert mit loadChildren, allerdings bekomme ich die Fehlermeldung "null is not a function" und der Fehler liegt irgendwo im core.js.
Eine andere Möglichkeit war: Im AppModul einen leeren Pfad angeben, der automatisch nach Login weiterleitet. Das funktioniert. Von Login route ich nach Home und auch das funktioniert. Problem ist, dass ab da an alle weiteren Routen navigiert werden können, aber nicht direkt per URL angesteuert werden können. Was heißt das?
localhost/Home funktioniert, wenn ich mich einlogge (wegen automatischer Navigation [router.navigate]) und auch, wenn ich den Browser starte und die URL eingebe.
localhost/Home/7 funktioniert nicht (die 7 sei hier ein Parameter). Der Fehler ist "cannot match any routes", wobei der Pfad "Home" ein Child mit der entsprechenden ID hat.

Das ganze Disaster hat angefangen, als ich Feature Module erstellt habe, um die Wartbarkeit und Wiederverwendbarkeit zu verbessern. Allerdings verschlechtert sich nun immer mehr die Bedienbarkeit...

Es wäre lieb, wenn mir jemand helfen könnte.

PS: Im Anhang ist ein kleines Diagramm wie die Komponenten zusammenhängen.

Ok... das Problem lag beim Server. Es muss explizit die index.html mitgeschickt werden, da der Client wohl die HTML Historie verwendet und somit beim Refresh eine falsche Route einschlägt, oder so.

Falls IIS verwendet wird: https://code.msdn.microsoft.com/How-to-fix-the-routing-225ac90f

Wenn Du Angular ordentlich in einen DevOps Prozess bekommen und unabhängig von der Umgebung umsetzen willst, dann kommst Du ohnehin nicht drumrum, dass Angular durch eine Server-seitige Komponente ausgeliefert wird; jedenfalls was die Settings betrifft.

Denn Settings kommen nicht in die Quellcode-Verwaltung, was man leider bei vielen, einfachen Angular Tutorials sieht.
Da trennt sich wieder das simple Tutorial von der Realität.

weiß ich gerade nicht, was ich von diesem "Debugging" haben soll.

hilft in jede Richtung wenig.
Das Debugging von JavaScript Anwendungen ist technologisch einfach auch ganz anders als .NET.
Erwartest Du das selbe, erwartest Du das falsche.

Es gibt hier andere Vorgehen und andere Werkzeuge.
Daher auch meine deutlichen Hinweise in VS17: TypeScript und Angular Version bestimmen, dass Visual Studio hier das falsche Werkzeug ist.

Hi Abt,

ja, scheint ganz so. Bin während meiner Recherche auch immer wieder auf Probleme von anderen Entwicklern gestoßen, die beim Umstellen von der Dev-Umgebung auf die Prod-Umgebung diverse Probleme hatten, gerade was das Routing betrifft.

Ich habe mir deinen Ratschlag mal zu Herzen genommen und VS Code mehr ausprobiert. Fühlt sich wirklich gleich viel besser an. Allerdings ist mein Frontend zu stark auf das Backend ausgerichtet (Token Authentifizierung, Daten aus Datenbank laden, ..). Heißt für mich, dass ich mich wohl erst etwas mehr mit IIS Express auseinandersetzen muss. VS Studio macht ja alles automatisch, sobald man F5 drückt. Riesige Blackbox und ich hab fast keine Ahnung, was da alles passiert im Hintergrund (abgesehen von dotnet run und dem daraufhin folgenden ng serve sowie weback etc.)

Allerdings ist mein Frontend zu stark auf das Backend ausgerichtet (Token Authentifizierung, Daten aus Datenbank laden, ..).

Das hört sich danach an, dass die Architektur nicht stimmt.

Deine Applikation muss so ausgerichtet sein, dass sie auch ohne das Backend zumindest mal funktional läuft - mit Mocks.
Diese Mocks können durch Schalter direkt im Code erfolgen (statt von einer API aus einem File laden), oder durch Mock-Services umgesetzt sein.

Das ist zum einen die Basis für eine unabhängige Entwicklung, die nicht ausgebremst wird - zum anderen die Basis, dass Du Deine Software überhaupt testen kannst.

Danke, Abt. Klingt eigentlich logisch 😁