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

====== Angular Deploy ======

  * **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>

==== Változtatás ====

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


Ha megváltoztatjuk a href tartalmát:

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

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/

==== A provideRouter() paraméterezése ====

Importáljuk és adjuk meg a withHashLocation() függvényt paraméterként.

<code typescript src/app.routes.ts>
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withHashLocation } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withHashLocation())
  ]
};

</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  |

===== Netlify =====

  * Hozzunk lére egy hozzáférést a webhelyen.
  * Futtassuk a **ng deploy** parancsot, ahol kiválasztjuk a Netfliy lehetőséget.
  * Lépjünk be a netlify paranccsal: netlify login
  * Csináljunk egy feltöltést: netlify deploy --prod

A következő feltöltésekhez:
  * Az angular.json fájlban állítsuk be a website kulcsát, amit a Netlify weblapjáról kérhetünk le.
  * Feltöltés: ng deploy --prod


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