Tartalomjegyzék

< Angular

Angular Deploy

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:

Élő pici példa:

A provideRouter() paraméterezése

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

É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):

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

Netlify

A következő feltöltésekhez:

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