Visual Studio Code: progetto Angular

Angular è un framework frontend per TypeScript che mira a creare single page Web application dinamiche.

Obiettivi

Lo scopo della lezione è quello di imparare ad impostare un progetto Web Angular su Visual Studio Code.

Prerequisiti

Per poter comprendere tutti i contenuti di quest'articolo è consigliata una conoscenza base di:

• Visual Studio Code;
• HTML;
• CSS;
• TypeScript;
• Angular.

È inoltre assunto che si abbiano installati sul proprio dispositivo:

• Visual Studio Code;
• NodeJS;
• Angular cli.

Estensioni fondamentali

Vediamo quali estensioni possono facilitare la creazione ed il lavoro su un progetto Angular.

Language Server

Lo sviluppo di Angular inizia dal suo language server, ovvero quell'estensione che include una serie di strumenti d'utilità che segnalano errori e aiutano a riconoscere i file e le librerie con le documentazioni. L'id dell'estensione è Angular.ng-template.

Angular Snippet

Quest'estensione contiene una serie di template che auto generano codice normalmente lungo e mnemonico da scrivere. L'id dell'estensione è johnpapa.Angular2.

Angular Essentials

Contiene le due estensioni descritte in precedenza e altre consigliate da John Papa, noto sviluppatore Web di Microsoft. Non è necessario installare quest'estensione ma è utile per scoprire altre estensioni che potrebbero interessarvi. L'id è johnpapa.angular-essentials.

Angular-cli

Dà l'accesso ad un menu di creazione tramite tasto destro con la possibilità di generare componenti, servizi e altre strutture tipiche di Angular. L'id dell'estensione è segerdekort.angular-cli.

Potrebbe essere meglio disinstallarla per lavorare poi con altri workspace poiché le voci del menu restano visibili anche se non si tratta di un progetto Angular.

Creare un progetto Angular

Purtroppo non esistono estensioni per creare un progetto Angular direttamente con Visual Studio Code. Lo si deve fare manualmente. Apriamo quindi una cartella con Visual Studio Code in cui creare il nostro progetto:

Apriamo il terminale e scriviamo:

ng new nomedelprogetto

Se non abbiamo il tool ng è perché non è stato installato Angular-cli. Se manca si può installare scrivendo a una console con alti privilegi di amministrazione (sudo con Linux):

npm install --global @angular/cli

Rispondere come più opportuno per i propri scopi alle varie domande che vengono poste dal prompt. Dovreste ora avere il progetto visibile nell'Explorer.

Editor config e problema dell'indentazione

Ora bisogna mettere a puntino qualche piccola configurazione (file .editorconfig). Ad esempio in base all'utilizzo di tab o indentazioni.

Modificate quindi i valori indent_style e indent_size.

Avvio del server

L'avvio del server può avvenire manualmente tramite terminale scrivendo:

ng serve

Ricordiamoci anche di entrare prima nella cartella del progetto con cd:

cd nomeprogetto

Ma non è il solo metodo. Infatti, se avete seguito le nostre precedenti lezioni, avrete intuito che potrebbe essere utile impostare un task di esecuzione.

Per farlo andiamo nella barra del menù e clicchiamo su "Terminale" e quindi su "Esegui attività". Verrà visualizzato un menu pop-up da cui selezionare "Configurare un attività"

Se avete aperto il workspace di Visual Studio Code direttamente nella cartella del progetto Angular (e non in una esterna) il task sarà già configurato. Questa procedura replica manualmente parte di quelle configurazioni.

Selezionare quindi "npm start":

Dovrebbe crearsi lo script task.json. La forma finale dello script dovrebbe essere:

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "npm",
			"script": "start",
			"path": "nomedelprogetto",
			"problemMatcher": [],
			"label": "npm: start - nomedelprogetto",
			"detail": "ng serve"
		}
	]
}

Ovviamente si può pensare di cambiare anche la label con il nome che più si preferisce. Per avviare il task selezionare nuovamente "Terminale>Esegui attività>npm: start - nomedelprogetto" (o qualunque sia il nome della label che avete assegnato).

Debug

In linea teorica il debug su Visual Studio Code dovrebbe essere molto semplice e preconfigurato, tuttavia allo stato attuale non sono riuscito ad associare i punti di interruzione. Vediamo comunque come si dovrebbe impostare.

Anche in questo caso, se avete aperto il workspace di Visual Studio Code direttamente nella cartella del progetto Angular avrete le configurazioni di run e debug già pronte (richiamano automaticamente anche il task). Questa procedura replica manualmente parte di quelle configurazioni.

La prima strada è quella di creare manualmente il file di configurazione. Nel pannello laterale sinistro clicchiamo l'icona di debug (Tasto Play con la coccinella) e quindi "Creare un file launch.json" e quindi "App Web (Chrome)".

Nel file di configurazione andiamo ad incollare dopo la riga di webroot questo estratto (scrivere la virgola prima di incollarlo):

"resolveSourceMapLocations": [
  "${workspaceFolder}/**",
  "!**/node_modules/**"
],

Quindi cambiamo l'URL indicando la porta 4200.

Cambiamo il percorso del webpack includendo anche il nome del progetto, il risultato finale dovrebbe essere una cosa simile:

"configurations": [
{
	"type": "chrome",
	"request": "launch",
	"name": "Avvia Chrome con localhost",
	"url": "http://localhost:4200",
	"webRoot": "${workspaceFolder}/nomeprogetto",
	"resolveSourceMapLocations": [
		"${workspaceFolder}/**",
		"!**/node_modules/**"
	],
}
]

A questo punto dovrebbe funzionare tutto. Dopo aver avviato il task di npm, per avviare il debug basta andare nella tab del debug e cliccare l'icona Play in alto:

Si aprirà automaticamente Chrome con il debug associato:

Nonostante si riesca a connettere la console con successo, i punti di interruzione non si riescono ad associare per la mancanza del sourceMap di riferimento. Si spera che in futuro venga trovata qualche soluzione a riguardo.

Creare un componente

Se avete installato l'estensione Angular-cli premendo il tasto destro sul workspace (nella cartella app) potrete visualizzare nuove voci di menu:

Selezionandone una apparirà in alto un menu pop-up, con la possibilità di inserire il nome del voce da creare:

Premendo Invio vi ritroverete il nuovo componente già creato nel workspace.

Creazione da snippet

Si può generare totalmente un componente o qualunque altra struttura Angular utilizzando gli snippet. In un nuovo file, iniziando a scrivere a- e la struttura che si vuole creare, appariranno i vari template da selezionare con le frecce direzionali e poi con il tasto Invio:

Se non dovesse apparire nulla basterà cliccare Ctrl + Spazio. Una volta cliccato su Invio avrete il codice già pronto:

Call hierarchy e go to reference

Grazie al language server, avremo le funzionalità di ricerca della call hierarchy, import e reference dei file.

Ad esempio, premendo il tasto destro sul nome di una struttura di Angular ci si presentano una serie di azioni, come quella di "vedere la sua definizione", ovvero il file in cui è definito

si potrà anche visualizzare una piccola anteprima di tutti i punti dove è utilizzato il componente

Per vedere le definizioni e i punti di richiamo nei vari file, basta navigarli dalla sezione sulla destra:

Viene anche automatizzata l'auto-implementazione dei metodi richiesti da un'interfaccia. Dopo aver scritto implements NomeInterfaccia sorvolare sul nome della classe e quindi premere "Correggere errori":

Verrà richiesta l'azione, cliccare su "Implementa nomeMetodo":

Il metodo risulterà auto-implementato ma vuoto: