Angular 2+: Routing basierend auf der Antwort von api

Sagen Sie, ich habe folgendes

sage jetzt

product/1 - ist ein Film, der von DigitalMediaComponent

product/2 - sagt ein TV von ProductDetailsComponent

product/3 - ist ein Waschmaschinen / Trockner-Bündel, dargestellt als BundleComponent

product/4 - ist eine Matratzen-Kollektion, dazu gehören eine Matratze, Rahmen, Abdeckungen, Laken, Kissen, und einmal können Sie eine Reihe von Dingen, Farbe, Größen, Fadenzahl und so vor dem Kauf wählen

product/5 - ist ein Automotive-Produkt, sagen wir einen Reifen, so macht dies TireComponent - Dies erfordert ein Fitment-Modul, mit Jahr / Marke / Modell / Trimm-Auswahl und viele andere Anpassungen, bevor man

und die Liste geht weiter.

Nun gibt es offensichtlich einige Komponenten, die zwischen einigen von diesen wiederverwendet werden, aber insgesamt unterscheiden sie sich stark voneinander. Also möchte ich die JavaScript-Dateien (und CSS), die diese Komponenten enthalten, lazy laden (oder faul herunterladen), ich brauche nicht die MoviePreviewComponent beim Anzeigen von Reifen.

Ich habe viele Beispiele gelesen und sie sprechen alle von einem sehr einfachen Fall einer Eins-zu-eins-Beziehung zwischen Route und Komponente, wie

Gibt es einen Weg, wo ich kann

1. rufen Sie eine API auf, wenn Sie zu einer Route navigieren
2. und basierend auf der Antwort auf diese API verwenden Sie System.import('...') , um das Modul
zu laden

Ich möchte nicht zu einer Interstitial-Komponente navigieren und von dort laden, wenn der Nutzer auf ein Produkt aus den Suchergebnissen klickt (oder von anderen Werbebannern auf der gesamten Website, die möglicherweise mit angular 2 erstellt wurden) ), und wenn es ein wenig dauert, bis die Seite geladen wird, könnten sie esc drücken und auf etwas anderes klicken. Das ist normales Browserverhalten und ich möchte das nicht verlieren

Selbst wenn ich eine Interstitial-Komponente habe, wie würde ich das dynamische Modul laden?