Ich verwende Angular2 und SystemJS, um eine Webanwendung zu erstellen. Ich habe einige Module in meiner App und in der Router-Konfiguration verwende ich Lazy Loading, um sie zu öffnen.
Hier ist eine Routing-Datei meiner App, die zwei Module lädt:
%Vor%Ich benutze Gulp zum Erstellen von Aufgaben für den Entwicklungsserver und für die Produktionserstellung. Für den Build verwende ich den SystemJS Builder, der die verkleinerte JS-Datei für die gesamte App erstellt.
%Vor%Aber ... wenn ich versuche, einen Server auf dem Build-Paket auszuführen, funktioniert die App nicht, wenn versucht wird, die Lazy-Loaded-Module auszuführen. Es gibt mir den folgenden Fehler:
%Vor% Hier ist meine systemjs.config.js Datei:
BEARBEITEN:
Wie auf der Seite SystemJs Builder mit statischen Paketen beschrieben, benötigen wir keine SystemJs, um Module zu laden. Tatsächlich erstelle ich ein statisches Bündel (mit buildStatic , anstatt bundle ), aber da ich SystemJs ausschließe, scheint es, dass es keine anderen Möglichkeiten gibt, Module lazy zu laden.
Wie erstellt man also einen Produktions-Build mit bundle und verwendet dann Lazy-Lademodule, aber ohne SystemJS (ohne systemjs.config.js -Datei im dist -Ordner)? Ich sehe WebPack kann es tun ...
Sehen Sie, ob Sie system.js beschwichtigen können, indem Sie eine Karte für das erforderliche Modul bereitstellen. Wenn also system.js den Pfad modules / FIRST-SECTION / first-section.module findet, sagen Sie es: Hey, könnten Sie diesen Pfad zu modules / FIRST-SECTION / first- section.module.js ohne in der Konsole zu schreien. Hoffe, das hilft.
%Vor%Damit Pakete für Ihre App funktionieren, müssen Sie die Eigenschaft "bundles" für systemjs definieren, etwa so:
%Vor%Tags und Links angular lazy-loading gulp systemjs systemjs-builder