Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Angular 2 Grundkurs

System.js konfigurieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
System.js ist ein Module-Loader und in diesem Video erfahren Sie, wie er konfiguriert werden muss.
05:33

Transkript

Unser Projektsetup ist schon sehr weit fortgeschritten, denn wir haben bereits alle Angular-Module, die wir benötigen könnten schon implementiert. Wir sind hingegangen und haben Vendor-Module schon implementiert und auch Polyfills schon implementiert. Und zusätzlich zu einem der Vendor-Module gehörte auch SystemJS. SystemJS benötigen wir für folgenden Zweck. Ihr müsst euch vorstellen, wenn wir später unsere Anwendung programmieren, dann werden wir aus anderen Javascript-Modulen bestimmte Elemente importieren, um diese nutzen zu können. Dies hat zur Folge, dass wir von der reinen Theorie her, jedes dieser Module laden müssten damit wir dann anschließend auch gewährleisten können, dass der Import funktioniert. Damit wir das nicht alles per Hand machen können, gibt es SystemJS. Das sorgt nämlich dafür, dass die Module automatisch geladen werden, die wir in unserem Code dann auch verwenden. SystemJS muss dafür konfiguriert werden. So konfiguriert werden, dass beispielsweise ein Import aus dem Core-Modul automatisch dazu führt, dass dann quasi das umd-Element, das quasi das fertig gepackte Core-Modul beinhaltet, automatisch geladen wird und nachdem es dann geladen wird dann von dort sich dann die jeweiligen Elemente holt. Auch beispielsweise bei RxJS. Wenn wir uns jetzt RxJS mal kurz anschauen, dann seht ihr, dass auch hier, wenn ich beispielsweise "isArray" nutzen möchte, ich hier die Möglichkeit habe, durch einen Import von "rxjs/utils" "isArray" dann automatisch zu implementieren. Wenn ich aber diesen Import in meinen jeweiligen Javascript-Dateien dann nutze, dann muss natürlich SystemJS die Intelligenz besitzen, die jeweiligen Elemente automatisch für mich zu laden. Um das Ganze zu realisieren, beginne ich damit, dass ich eine Konfigurationsdatei für SystemJS erstelle, damit SystemJS überhaupt Bescheid weiß, wo es bestimmte Elemente finden kann. Ich erzeuge hierfür so eine Konfigurationsdatei und habe mir dafür auch schon ein Template angelegt. Dieses Template beruht übrigens auf der SystemConfig, wie sie auch Angular in seinen Samples selber verwendet. Die Datei nenne ich jetzt hier "system.config.js". Und wenn ich system.config.js jetzt hier geöffnet habe, können wir nun Folgendes erkennen. Zunächst einmal konfiguriere ich "system" selber über die Methode "config" und übergebe ihr ein Konfigurationsobjekt. Wir beginnen damit, dass wir in dem Konfigurationsobjekt die Pfade definieren. So werden wir sagen, dass wenn wir intern irgendwo über "npm:" sprechen, diese dann anschließend innerhalb meines Projektsetups in "node_modules" gesucht werden soll. Also, wenn wir hier einmal hochscrollen, quasi genau hier drin. Weiter erzeugen wir eine Map. Diese Map erzählt SystemJS im Grunde genommen, wo es bestimmte Elemente zu finden hat. Wenn wir also irgendwann mal ein Import über "app" machen, dann hat das nichts anderes zur Folge, als das SystemJS automatisch in "app" danach suchen soll. Und aus "app" dann, entsprechend dann die Ladeprozesse starten soll. Wenn ich irgendwo ein Import über "@angular/core" verwende, dann sagen wir SystemJS: Suche das Ganze im Pfad für npm, das heißt "node_modules". Hier gibt es ein Unterordner "angular/core". Und hier lade dann einfach die "bundles/core.umt.js" - Das war das Teil, das wir uns gerade angeschaut haben - und was im Grunde genommen quasi die fertig kompilierte beziehungsweise komprimierte Bibliothek für "angular/core" entsprechend enthält. Das gleiche machen wir für "common". "compiler", "platform-browser" und "platform-dynamic". Das ist immer die gleiche Schreibweise, die geht immer auf "bundles" zurück und laden uns die "umd"-Datei. Denn die "umd"-Dateien sind im Grunde genommen die konkatinierte Datei, welche alle Source-Elemente dann implementiert als Javascript-Core. Weiterhin habe ich das Ganze gemacht für "http", "router" und "forms". Last but not least auch für "rxjs". Das hatten wir uns gerade auch angeschaut gehabt. Und bei dem "rxjs" auch ganz interessant zu erkennen, habe ich hier über "packages" dann auch noch gesagt, dass dann hier standardmäßig die Javascript-Erweiterung geladen werden soll, wenn da ein Import stattfindet. Würde ich also ein Import machen, von "rxjs/util/isArray" würde er automatisch an dieser Stelle wissen, dass er das "isArray" dann entsprechend aus diesem Element dann holt, indem es dann Javascript hinten dranhängt. Und damit würde der Ladeprozess dann wunderbar funktionieren. Zu guter Letzt sage ich bei den Packages übrigens auch noch hier an dieser Stelle, dass das "package" für die "app" selber eine Startdatei haben soll. Das ist nämlich mit "main" hier definiert. Und diese Startdatei, die ich hier mit "main" definiere, die habe ich hier in meinem "app"-Ordner dann auch entsprechend drin. Das ist die "main.js". Die wird kompiliert aus der "main.ts"-Datei also aus der TypeScript-Datei. Und die würde dann automatisch dann ebenfalls mitgeladen werden. Das bedeutet, SystemJS beginnt zu arbeiten. Würde anhand dieser Strukturen dann "main.js" dann laden und mit der "main.js" dann anfangen zu arbeiten und würde dann in dieser "main.js" die Analyse beginnen, welche Imports benötigt werden, und peu à peu, alle notwendigen Elemente dann nachladen, die benötigt werden, damit die Anwendung auch laufen kann. In diesem Video haben wir gelernt, wie wir in der Lage sind, SystemJS zu konfigurieren.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 Videos)
An sich total interessant aber...
Robert K.

Zwischen den einzelnen Videos werden immer wieder die Dateien wie system.config.js gezeigt. Diese scheinen aber von Video zu Video andere Inhalte zu haben so z.B. die system.config.js Das verwirrt den Nutzer extrem.

 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!