padawan: In Angular externe lib per Webpack einbinden

Beitrag lesen

Hallo,

ich kann in einem Angular Projekt externe JavaScript libs per CLI einbinden, indem ich die Pfade zur lib in der angular.json unter architect in scripts und assets eintrage.

Was Angular CLI aus dieser Konfig macht, ist ja nichts anderes als in der index.html ein weiteres <script src=""></script> einzufügen.

(Genau genommen gibt es einen Chunk namens scripts.js, der alle Scripte zusammenfügt, soweit ich das sehe.)

Jetzt habe ich ein Angular Projekt, welches nur Webpack nutzt ohne das CLI verwendet werden kann. Wie kann ich meine externe lib hier einbinden?

Das hängt davon ab, wie du im HTML deine Scripte einbindest. Gibt es eine index.html, in der du deine Scripte lädst? Dann füge einfach dort ein weiteres <script src=""> hinzu. Das wäre das einfachste.

Du kannst das Einfügen des Scripts mit Webpack lösen, musst es aber nicht. Das ist unr nötig, wenn Webpack deine index.html erzeugt, z.B. mit dem HtmlWebpackPlugin (siehe auch Doku).

so dass ich die lib mxGraph auch unter Webpack nutzen kann ("src/assets/lib/mxgraph/javascript/mxClient.js" und "src/assets").

Mal anders gefragt: Warum installierst du die Lib nicht einfach über npm und importierst sie mit import? Letzteres geht auch, wenn sie als Datei in src herumliegt.

Wenn du sie einfach importierst, dann landet die Lib automatisch einem der Webpack-Chunks. Dann brauchst du kein zusätzliches script-Element o.ä.

Grüße

padawan