< Angular

Angular Deploy

Szerző: Sallai András

Copyright © Sallai András, 2021, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Build

Készítsük el a production-t:

ng build

Elkészül egy dist/projectnev/ könyvtár.

Ha szeretne ezen változtatni, állítsa be az outputPath értékét az angular.json fájlban.

Build alkönyvtárba

Ha a projekt végleges helye egy alkönyvtár, mondjuk meg a --base-href vagy a --deployUrl kapcsolóval.

Használjuk a --base-href kapcsolót:

ng build --base-href=/alkonyvtar/

Aktuális könyvtár

Ha csak szeretnénk egy könyvtárban megnyitni az index.html fájlt, az aktuális könyvtárat kell beállítani.

Az index.html fájlban utólag is beállítható az alkönyvtár. Elég egy (.) pont is:

<base href="./">

Változtatás

<base href="/egy/">

Ha megváltoztatjuk a href tartalmát:

<base href="/ketto/">

A böngésző nem frissíti az index.html-t a ketto alapkönyvtárra.

Megoldás:

Nyissuk meg az oldal forráskódját.

Frissítsük az oldal forráskódját.

Élő pici példa:

https://szit.hu/m/angular_minta/

Élő build

Ha a fejlesztés vége felé szeretnénk folyamatosan látni dist könyvtárban is a változásokat használjuk a --watch kapcsolót:

ng build --watch

Egy másik terminálban telepítsünk egy webszervert, például lite-server, majd:

lite-server --baseDir="dist/projectnev"

A lite-server csak fejlesztésre tervezett szerver

Felhő

Az angular-cli támogat néhány felhőbe telepítést 1) A https://angular.io/guide/deployment alapján :

Szolgáltatás	Szükséges csomag
Firebase	@angular/fire
Azure	@azure/ng-deploy
Vercel (korábbi nevén zeit)	@zeit/ng-deploy
Netlify	@netlify-builder/deploy
GitHub pages	angular-cli-ghpages
NPM	ngx-deploy-npm
Amazon Cloud S3	@jefiozie/ngx-aws-deploy

Környezet

src/environments/environments.ts

export const environment = { production: false };

Cache

Az Angular többféle tevékenységet is tárol az ng build során, hogy később azokat felhasználhassa. Ha szeretnénk tisztán kezdeni:

ng cache clean

Függelék

Példa

ng build --prod --output-path="dist/alkonyvtar" --deployUrl="alkonyvtar/"

Linkek

https://angular.io/cli/cache (2022)