In Angular externe lib per Webpack einbinden

[hmm]

hi,

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. Jetzt habe ich ein Angular Projekt, welches nur Webpack nutzt ohne das CLI verwendet werden kann. Wie kann ich meine externe lib hier einbinden?

Diese Konfig aus meinem Angular CLI Projekt würde ich gerne in mein Angula-nur-Webpack Projekt auf Webpack "umschreiben", so dass ich die lib mxGraph auch unter Webpack nutzen kann ("src/assets/lib/mxgraph/javascript/mxClient.js" und "src/assets").

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-with-mxgraph",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              "src/assets/lib/mxgraph/javascript/mxClient.js"
            ]
          },

Ich habe in meiner Webpack Konfig mit dem Entrypoint und mit requiere rumgespielt und ein paar Plugins ausprobiert, aber leider hat das alles nicht geholfen.

[padawan]

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