Angular Deploy

• Szerző: Sallai András
• Copyright © Sallai András, 2021, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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.

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/

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="./">

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

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

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())
  ]
};

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"

Az angular-cli támogat néhány felhőbe telepítést ¹⁾:

• 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

src/environments/environments.ts

export const environment = {
  production: false
};

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

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

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