Nie jestem pewien, jak dołączyć pliki JS (dostawców) po przełączeniu Angular Cli z SystemJs na Webpack.
Na przykład
Opcja A
Mam kilka plików js, które zostały zainstalowane przez npm. Dodawanie tagów skryptu do tagu head w ten sposób nie działa. Nie wydaje się też najlepszym sposobem.
<head>
<script src="node_modules/some_package/somejs.js">
</head>
//With systemJs I could do this
<head>
<script src="vendor/some_package/somejs.js">
</head>
Opcja B.
Dołącz te pliki js jako część pakietu webpack. Wydaje się, że tak powinno być. Jednak nie jestem pewien, jak to zrobić, ponieważ cały kod pakietu webpack wydaje się być ukryty za pakietem węzłów angular-cli-webpack. Pomyślałem, że może jest inna konfiguracja pakietu internetowego, do której moglibyśmy mieć dostęp. Ale nie jestem pewien, ponieważ nie widziałem go podczas tworzenia nowego projektu angular-cli-webpack.
Więcej informacji:
Pliki js, które próbuję dołączyć, muszą zostać dołączone przed projektem Angular. Na przykład jQuery i biblioteka js innej firmy, która nie jest tak naprawdę skonfigurowana do ładowania modułu lub maszynopisu.
Odnośniki https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack
źródło
Odpowiedzi:
Ostatnio testowane przy użyciu angular-cli 7.xx z Angular 7.xx
Można to osiągnąć stosując
scripts:[]w.angular-cli.json.{ "project": { "version": "1.0.0", "name": "my-project" }, "apps": [ { "root": "src", "outDir": "dist", "assets": ["assets"], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.json", "prefix": "app", "mobile": false, "styles": [ "styles.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js" ], "environments": { "source": "environments/environment.ts", "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "addons": [], "packages": [], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "prefixInterfaces": false } }Uwaga: Jak sugeruje dokumentacja w instalacji biblioteki globalnej: jeśli zmienisz wartość swojej
styles(lubscripts!) Właściwości, to:..aby zobaczyć skrypty wykonywane w ** globalcontext za pośrednictwem
scripts.bundle.jspliku.Uwaga: jak omówiono w komentarzach poniżej. Biblioteki JS, które obsługują moduły UMD za pośrednictwem importu es6, takie jak jQuery, można również importować do plików maszynopisu przy użyciu składni importu es6. Na przykład:
import $ from 'jquery';.źródło
src/polyfills.ts(od wersji beta.31)Istnieje subtelna różnica pomiędzy używaniem
scripts:[]a potem dodaniem czegoś do<head>with<script>. Skrypty zscripts:[]get są dodawane do,scripts.bundle.jsktóre są zawsze ładowane w tagu body i tym samym będą ładowane PO skryptach w<head>. Tak więc, jeśli kolejność ładowania skryptów ma znaczenie (tj. Musisz załadować globalny polyfill), jedyną opcją jest ręczne skopiowanie skryptów do folderu (np. Skryptem npm) i dodanie tego folderu jako zasobu do.angular-cli.json.Więc jeśli naprawdę zależy ci na tym, aby coś było ładowane przed samym angularem ( opcja A ), musisz skopiować to ręcznie do folderu, który zostanie uwzględniony w kompilacji kątowej, a następnie możesz załadować go ręcznie za pomocą pliku
<script>in<head>.Dlatego, aby uzyskać opcję a , musisz:
vendorfolder wsrc/.angular-cli.json:"assets": [ "assets", "favicon.ico", "vendor" ]skopiuj skrypt dostawcy
node_modules/some_package/somejs.jsdovendorzaładuj go ręcznie w
index.html:<head> <script src="vendor/some_package/somejs.js"> </head>Jednak w większości przypadków takie podejście jest potrzebne tylko w przypadku pakietów, które muszą być dostępne globalnie, przede wszystkim (np. Niektóre wypełnienia). Odpowiedź Krisa jest prawdziwa dla Opcji B i możesz skorzystać z kompilacji pakietu internetowego (minifikacja, skróty, ...).
Jednak jeśli twoje skrypty nie muszą być globalnie dostępne i jeśli są gotowe do modułów , możesz je zaimportować
src/polyfills.tslub nawet lepiej zaimportować je tylko wtedy, gdy potrzebujesz ich w określonych komponentach.Udostępnianie skryptów globalnie poprzez
scripts:[]lub poprzez ich ręczne ładowanie przynosi własny zestaw problemów i powinno być używane tylko wtedy, gdy jest to absolutnie konieczne.źródło
Musisz otworzyć plik
.angular-cli.jsonpliku i musisz wyszukać"scripts:"lub jeśli chcesz dodać zewnętrzny css, musisz znaleźć słowo"styles":w tym samym pliku.Jako przykład pokazany poniżej zobaczysz, jak bootstrap Js (
bootstrap.min.js) i bootstrap CSS (bootstrap.min.css) zawiera.angular-cli.json:"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],Na pewno, jeśli masz własny plik js, możesz dodać ścieżkę do pliku tutaj w
.angular-cli.jsontym samym miejscu (w"scripts":[]).źródło
Możesz zajrzeć na tę stronę: https://github.com/angular/angular-cli#global-library-installation
Przedstawia podstawy dołączania plików .js i .css
źródło
Nie używałem wcześniej angular-cli, ale obecnie pracuję z kompilacją Angular / Webpack. W celu zapewnienia mój wniosek z jQuery i innych dostawców używać wtyczki WebPACK, w
ProvidePlugin(). Zazwyczaj będzie towebpack.config.jsznajdować się w twoim : Oto przykład dla bibliotek jquery, lodash i moment. Oto link do dokumentacji (która jest w najlepszym przypadku niejasna)plugins: [ new webpack.ProvidePlugin({ $: 'jquery', _: 'lodash', moment: 'moment', }) ]Co niewiarygodne, w rzeczywistości umożliwia to natychmiastowe użycie, pod warunkiem, że wszystkie inne ustawienia pakietu webpack zostały wykonane poprawnie i zostały zainstalowane z
npm.źródło
ng buildto wszystko jest obsługiwane przez CLI. Ale myślałem, że prawdopodobnie istnieje sposób na dodanie rzeczy jako części kompilacji. Ale nie widziałem żadnego wyraźnego przykładu.