In Angular externe lib per Webpack einbinden – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes In Angular externe lib per Webpack einbinden Fri, 29 Jan 21 13:44:16 Z https://forum.selfhtml.org/self/2021/jan/29/in-angular-externe-lib-per-webpack-einbinden/1783280?srt=yes#m1783280 https://forum.selfhtml.org/self/2021/jan/29/in-angular-externe-lib-per-webpack-einbinden/1783280?srt=yes#m1783280 <p>hi,</p> <p>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?</p> <p>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").</p> <pre><code class="block language-javascript"> <span class="token string-property property">"architect"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"build"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"builder"</span><span class="token operator">:</span> <span class="token string">"@angular-devkit/build-angular:browser"</span><span class="token punctuation">,</span> <span class="token string-property property">"options"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"outputPath"</span><span class="token operator">:</span> <span class="token string">"dist/angular-with-mxgraph"</span><span class="token punctuation">,</span> <span class="token string-property property">"index"</span><span class="token operator">:</span> <span class="token string">"src/index.html"</span><span class="token punctuation">,</span> <span class="token string-property property">"main"</span><span class="token operator">:</span> <span class="token string">"src/main.ts"</span><span class="token punctuation">,</span> <span class="token string-property property">"polyfills"</span><span class="token operator">:</span> <span class="token string">"src/polyfills.ts"</span><span class="token punctuation">,</span> <span class="token string-property property">"tsConfig"</span><span class="token operator">:</span> <span class="token string">"tsconfig.app.json"</span><span class="token punctuation">,</span> <span class="token string-property property">"aot"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token string-property property">"assets"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"src/favicon.ico"</span><span class="token punctuation">,</span> <span class="token string">"src/assets"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string-property property">"styles"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"src/styles.scss"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string-property property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"src/assets/lib/mxgraph/javascript/mxClient.js"</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> </code></pre> <p>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.</p> In Angular externe lib per Webpack einbinden Wed, 03 Feb 21 14:15:49 Z https://forum.selfhtml.org/self/2021/jan/29/in-angular-externe-lib-per-webpack-einbinden/1783500?srt=yes#m1783500 https://forum.selfhtml.org/self/2021/jan/29/in-angular-externe-lib-per-webpack-einbinden/1783500?srt=yes#m1783500 <p>Hallo,</p> <blockquote> <p>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.</p> </blockquote> <p>Was Angular CLI aus dieser Konfig macht, ist ja nichts anderes als in der index.html ein weiteres <script src=""></script> einzufügen.</p> <p>(Genau genommen gibt es einen Chunk namens scripts.js, der alle Scripte zusammenfügt, soweit ich das sehe.)</p> <blockquote> <p>Jetzt habe ich ein Angular Projekt, welches nur Webpack nutzt ohne das CLI verwendet werden kann. Wie kann ich meine externe lib hier einbinden?</p> </blockquote> <p>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.</p> <p>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 <a href="https://webpack.js.org/plugins/html-webpack-plugin/" rel="nofollow noopener noreferrer">HtmlWebpackPlugin</a> (siehe auch <a href="https://github.com/jantimon/html-webpack-plugin" rel="noopener noreferrer">Doku</a>).</p> <blockquote> <p>so dass ich die lib mxGraph auch unter Webpack nutzen kann ("src/assets/lib/mxgraph/javascript/mxClient.js" und "src/assets").</p> </blockquote> <p>Mal anders gefragt: Warum installierst du die Lib nicht einfach über npm und importierst sie mit <code>import</code>? Letzteres geht auch, wenn sie als Datei in <code>src</code> herumliegt.</p> <p>Wenn du sie einfach importierst, dann landet die Lib automatisch einem der Webpack-Chunks. Dann brauchst du kein zusätzliches script-Element o.ä.</p> <p>Grüße</p> <p>padawan</p>