[[oktatas:web:angular|< Angular]]

====== Angular Build ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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 
<nowiki>--base-href</nowiki> vagy a
<nowiki>--deployUrl</nowiki> kapcsolóval.

Használjuk a <nowiki>--base-href</nowiki> 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:

<code html>
<base href="./">
</code>

===== É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 <nowiki>--watch</nowiki> 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"

<note tip>A lite-server csak fejlesztésre tervezett szerver</note>


===== Felhő =====

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


^  Szolgáltatás  ^  Szükséges csomag  ^
| [[https://firebase.google.com/docs/hosting|Firebase]]  | @angular/fire |
| [[https://azure.microsoft.com/hu-hu/|Azure]]  | @azure/ng-deploy  |
| [[https://vercel.com/solutions/angular|Vercel (korábbi nevén zeit)]]  | @zeit/ng-deploy  |
| [[https://www.netlify.com/|Netlify]]  | @netlify-builder/deploy  |
| [[https://pages.github.com/|GitHub pages]]  | angular-cli-ghpages  |
| [[https://npmjs.com/|NPM]]  | ngx-deploy-npm  |
| [[https://aws.amazon.com/s3/?nc2=h_ql_prod_st_s3|Amazon Cloud S3]]  | @jefiozie/ngx-aws-deploy  |

===== Környezet =====

<code>
src/environments/environments.ts
</code>

<code javascript>
export const environment = {
  production: false
};
</code>


===== 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)