Egy ideje látom, hogy nyitnom kell frontend irányba.
Az Angulart választottam a koherenssége miatt. Tudom mások pont ezt hozzák ellenérvként.
Képbe került olyan feladat, hogy hordozható készülékről kell intézni a fixen telepített számítógépes rendszer funkcióinak egy részét. Így kerül képbe a Progressive Web Application (PWA).

Kinéztem egy ideálisnak tűnő oktató videót. Végignéztem. Nem is volt hosszú, értettem is. Ugyan kissé gyorsnak találtam a bemutatás. Gondoltam, megállítom ahol kell.
A videó 20 perces, gondoltam egy nap alatt “megeszem”. Hát nem! Úgy öt nap lett belőle.
A videó négy éve készült azóta verziók változtak, plugin alakult át, inkompatibilitások keletkeztek. Persze az is közrejátszott, hogy Angular téren is kezdő vagyok.

Telepítettem, amit kellett Node Package Manager-t (NPM), Angular command-line interface-t (NG CLI). Visual Studio Code ide már volt.

Win10-en az NG futtatását engedélyezni kellett.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Ez viszonylag megengedő. Aki paranoiás beállíthat szigorúbbat.

A videó által javasolt `Angular console` már nem létezik átalakult `Nx console`-á. Persze a kezelése is lényegesen eltér a videóban láthatótól.

A `square` komponens ugyan létrejött, de a `app.component.html`-ben a vscode nem ajánlotta fel és a fordítás is sikertelen volt. Biztos nálam van a hiba, figyelmetlen voltam, vagy a megváltozott NX konzolban rosszul paramétereztem. Jó pár kísérlet után rákerestem a Google-ben.
Az Angular 17-es verziója bugos (lehet szándékos a változás?). Minden esetre 2023 november közepén a létrehozott projektben nem keletkezett az `app.module.ts` állományt. Ami a például a komponenseket is láthatóvá teszi a sablonokban (template HTML).

Sajnos nem jegyzeteltem mindent. Így nem emlékszem pontosan, hogy `Nebular` kontroll készlet inkompatibilitása hogyan bukott ki. Minden esetre a Nebular fejlesztése egy ideje megszűnt, csak régebbi Angular verzióval használható.

Nos, itt adtam fel a videó szó szerinti követését előröl kezdtem a projektet NX console és Nebular nélkül. Kontroll készlet gyanánt a `@angular/material`-t használtam. Ami közel sem olyan látványos, viszont kompatibilis és működik.
A videó lépéseit, logikáját követtem, de az alábbi parancsokkal operáltam.

ng new Tic-Tac-Toe --no-standalone
cd .\Tic-Tac-Toe
ng serve //(1)
ng build --configuration=production
ng g c square -t -s
ng g c board
ng add @angular/material
ng add @angular/pwa
ng build --configuration=production --aot=true
ng serve --configuration=production
npm i inquirer-autocomplete-prompt@2 //(2)
npm install -g firebase-tools
firebase login
ng add @angular/fire
firebase experiments:enable webframeworks
firebase deploy --only hosting:tic-tac-toe-6b23b

(1) a vsCodeban a Tic-Tac-Toe folderben kiadva
(2) a friss verzió nem volt kompatibilis a firebase-hez

Mint látható, a Firebase telepítése sem volt zökkenő mentes, elakadt hibával. A telepítés paramétereinek beolvasását intéző plugin “túl friss” volt. A `inquirer-autocomplete-promp`-ból régebbi verzióra volt szükség.

A `firebase login` persze feltételezi, hogy legyen Firebase fiók. Mintha a projektet is létre kellet volna hozni a login előtt.

Az eredményt egy ideig elérhető lesz itt. Mivel PWA, telepíthető is. Windows alatt Chrome böngészőből. Androidon szintén Chrome-t használtam. Ismerős telepítette iPhone-ra, szintén Chrome-t használva. Iphone-on a jobb szélső gombok kilógnak a játékmezőből. Ez némi css munkát igényelne, de itt a telepíthetőség volt az elsődleges szempont.

A forrás elérhető a publikus repoban.

Azért piszkált a dolog. Megigazítottam, hogy iPhonon is "rendesen" nézzen ki.
A mat-disabled-button lógott ki a grid-template-columns-al definiált 3x3-as játéktér celláiból. Ennek okára nem jöttem rá. Nem értek ehhez a kontroll készlethez.  Mint korábban említettem az elfogadható kinézet mellet a "kvázi" alkalmazásként való telepíthetőség volt a cél.