{"id":29349,"date":"2018-10-24T00:00:00","date_gmt":"2018-10-23T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=29349"},"modified":"2021-01-13T09:40:52","modified_gmt":"2021-01-13T08:40:52","slug":"angular-nodejs-e-typescript-insieme","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/","title":{"rendered":"Angular, NodeJS e Typescript insieme"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"273\" data-attachment-id=\"29350\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/attachment\/317bf26c-e817-40f6-a2e8-873bb02f32b9\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&amp;ssl=1\" data-orig-size=\"1024,273\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"317bf26c-e817-40f6-a2e8-873bb02f32b9\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?resize=1024%2C273&#038;ssl=1\" alt=\"\" class=\"wp-image-29350\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9-980x261.jpg 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9-480x128.jpg 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Un nuovo cliente mi ha chiamato per un progetto su un dispositivo embedded, dove l&#8217;obiettivo principale \u00e8 fornire una semplice user interface per controllare l&#8217;esecuzione&nbsp; di un&nbsp;workflow sul device. Dopo aver scartato Asp.Net Core, perch\u00e9&nbsp;attualmente non supporta i processori ARM, abbiamo proposto Angular per il&nbsp;front-end e Node per il backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ovviamente, l&#8217;esecuzione del workflow \u00e8 demandata ad un progetto core scritto in C++:&nbsp;il nostro lavoro consiste nella realizzazione della user interface, per creare e visualizzare il workflow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il cliente ha accettato l&#8217;uso di Node ma, per la sua conoscenza della piattaforma .Net, ci ha chiesto di usare&nbsp;Typescript anche per il backend. Nessun problema, naturalmente, ma ho pensato fosse interessante condividere il&nbsp;setup di un progetto Angular con Node e Typescript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Come primo passo&nbsp;installiamo i prerequisiti:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>NodeJS da <a href=\"https:\/\/nodejs.org\/\" rel=\"nofollow\">https:\/\/nodejs.org\/<\/a><\/li><li>Angular CLI con il comando&nbsp;<em>npm<\/em><em>&nbsp;install -g @angular\/<\/em><em>cli<\/em><\/li><li>Typescript con il comando&nbsp;<em>npm<\/em><em>&nbsp;install -g typescript<\/em><\/li><li>Gulp con il comando&nbsp;<em>npm<\/em><em>&nbsp;install -g gulp<\/em><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Creiamo un nuovo progetto con&nbsp;Angular CLI&nbsp;(per esempio con il comando&nbsp;<em>ng new angular-node-typescript),<\/em>&nbsp;e apriamo il progetto con il nostro code editor preferito, nel mio caso Visual Studio Code:&nbsp;<a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/code.visualstudio.com<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Creiamo una cartella&nbsp;<em>\u201cserver\u201d<\/em>&nbsp;nella root del progetto, dove metteremo il codice del backend, e creiamo in questa cartella un nuovo file chiamato&nbsp;<em>server.ts<\/em>. Come framework per il backend NodeJS, usiamo ExpressJS, installabile nel progetto con i seguenti comandi:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>npm<\/em><em>&nbsp;install &#8211;save express&nbsp;<\/em>per ExpressJS, l&#8217;opzione &#8211;save aggiunge il pacchetto richiesto&nbsp;alla nostra configurazione nel package.json<\/li><li><em>npm<\/em><em>&nbsp;install &#8211;save body-parser<\/em>&nbsp;come middleware ExpressJS. Il suo compito \u00e8 estrarre l&#8217;intero contenuto del body della richiesta&nbsp;ed esporla in req.body. Molto utile.<\/li><li><em>npm<\/em><em>&nbsp;install @types\/node @types\/body-parser @types\/express -D<\/em>, per le definizioni dei tipi per Typescript di Node, body-parser e Express. L&#8217;opzione -D salva le dipendenze come dipendenze di sviluppo, perch\u00e9&nbsp;sono utili solo durante la fase di sviluppo&nbsp;(nel package.json troveremo queste dipendenze nel blocco devDependencies)<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ritorniamo al file server.ts e importiamo le librerie necessarie:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimport * as express from &#039;express&#039;; \nimport * as path from &#039;path&#039;; \nimport * as http from &#039;http&#039;; \nimport * as bodyParser from &#039;body-parser&#039;;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Possiamo ora creare la classe Server:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nclass Server { \n\u00a0\u00a0\u00a0\u00a0public app: express.Application; \n\u00a0\n\u00a0\u00a0\u00a0\u00a0public static bootstrap(): Server { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return new Server(); \n\u00a0\u00a0\u00a0\u00a0} \n\u00a0\n\u00a0\u00a0\u00a0\u00a0constructor() { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ create expressjs application \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.app = express(); \n\u00a0\u00a0\u00a0\u00a0} \n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">E chiamare il metodo statico\u00a0<em>bootstrap<\/em>\u00a0per la creazione dell&#8217;oggetto Server:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nServer.bootstrap();\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Adesso possiamo inizializzare il nostro web server, creando un metodo privato di questa classe, che chiameremo\u00a0<em>config<\/em>.Qui configureremo il middleware body-parser, setteremo la cartella pubblica dove pubblicheremo il progetto Angular, configureremo la porta dove il server ascolter\u00e0 le richieste\u00a0HTTP e faremo partire il server:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nprivate config() { \n\u00a0\u00a0\u00a0\u00a0\/\/ Parsers for POST data \n\u00a0\u00a0\u00a0\u00a0this.app.use(bodyParser.json()); \n\u00a0\u00a0\u00a0\u00a0this.app.use(bodyParser.urlencoded({ extended: false })); \n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Point static path to public folder \n\u00a0\u00a0\u00a0\u00a0this.app.use(express.static(path.join(__dirname, &#039;public&#039;))); \n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/** \n\u00a0\u00a0\u00a0\u00a0\u00a0* Get port from environment and store in Express. \n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0const port = process.env.PORT || &#039;3000&#039;; \n\u00a0\u00a0\u00a0\u00a0this.app.set(&#039;port&#039;, port); \n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/** \n\u00a0\u00a0\u00a0\u00a0\u00a0* Create HTTP server. \n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0const server = http.createServer(this.app); \n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/** \n\u00a0\u00a0\u00a0\u00a0\u00a0* Listen on provided port, on all network interfaces. \n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0server.listen(port, () =&gt; console.log(`API running on localhost:${port}`)); \n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Il nostro\u00a0backend \u00e8 una collezione di API REST, quindi dobbiamo configurare le rotte del progetto. Per questo scopo, creeremo un secondo metodo privato nella classe\u00a0Server, che chiameremo\u00a0<em>routes<\/em>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nprivate routes() { \n\u00a0\u00a0\u00a0\u00a0\/\/ get router \n\u00a0\u00a0\u00a0\u00a0let router: express.Router; \n\u00a0\u00a0\u00a0\u00a0router = express.Router(); \n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ create routes \n\u00a0\u00a0\u00a0\u00a0const api: BackendApi = new BackendApi(); \n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ test API \n\u00a0\u00a0\u00a0\u00a0router.get(&#039;\/api\/test&#039;, api.test.bind(api.test)); \n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ use router middleware \n\u00a0\u00a0\u00a0\u00a0this.app.use(router); \n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Catch all other routes and return the index file \n\u00a0\u00a0\u00a0\u00a0this.app.get(&#039;*&#039;, (req, res) =&gt; { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0res.sendFile(path.join(__dirname, &#039;public\/index.html&#039;)); \n\u00a0\u00a0\u00a0\u00a0}); \n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Come potete vedere, nel codice\u00a0usiamo il middleware router di ExpressJS per migliorare la manutenibilit\u00e0 del progetto. Metteremo le implementazioni delle API in una sottocartella chiamata\u00a0<em>routes.<\/em>\u00a0Per il nostro esempio, creeremo un file backendapi.ts in questa cartella:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimport * as express from &#039;express&#039;; \n\u00a0\nexport class BackendApi { \n\u00a0\u00a0\u00a0\u00a0public test(req: express.Request, res: express.Response) { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0res.json(&#039;Hello World&#039;); \n\u00a0\u00a0\u00a0\u00a0} \n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Giusto una nota sull&#8217;ultima istruzione del metodo\u00a0<em>routes<\/em>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\n\/\/ Catch all other routes and return the index file \nthis.app.get(&#039;*&#039;, (req, res) =&gt; { \n\u00a0\u00a0\u00a0\u00a0res.sendFile(path.join(__dirname, &#039;public\/index.html&#039;)); \n});\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Questo permette di rispondere con l&#8217;applicazione Angular buildata\u00a0su tutte le richieste non gestite diversamente. Quindi, il costruttore del Server diventa il seguente:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconstructor() { \n\u00a0\u00a0\u00a0\u00a0\/\/ create expressjs application \n\u00a0\u00a0\u00a0\u00a0this.app = express(); \n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ configure application \n\u00a0\u00a0\u00a0\u00a0this.config(); \n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ configure routes \n\u00a0\u00a0\u00a0\u00a0this.routes(); \n}\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconstructor() { \n\u00a0\u00a0\u00a0\u00a0\/\/ create expressjs application \n\u00a0\u00a0\u00a0\u00a0this.app = express(); \n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ configure application \n\u00a0\u00a0\u00a0\u00a0this.config(); \n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ configure routes \n\u00a0\u00a0\u00a0\u00a0this.routes(); \n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Il server \u00e8 pronto, quindi, se ci spostiamo nella cartella\u00a0<em>server<\/em>\u00a0ed eseguiamo il comando\u00a0<em>tsc server.ts<\/em>, il compilatore Typescript crea il file\u00a0<em>server.js<\/em>, che, eseguito in Node con il comando\u00a0<em>node server.js,<\/em>\u00a0fa partire il nostro server:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"896\" height=\"556\" data-attachment-id=\"29355\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/attachment\/06cc53dc-851d-40a6-a6d3-2e78866332a3\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/06cc53dc-851d-40a6-a6d3-2e78866332a3.png?fit=896%2C556&amp;ssl=1\" data-orig-size=\"896,556\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"06cc53dc-851d-40a6-a6d3-2e78866332a3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/06cc53dc-851d-40a6-a6d3-2e78866332a3.png?fit=896%2C556&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/06cc53dc-851d-40a6-a6d3-2e78866332a3.png?resize=896%2C556&#038;ssl=1\" alt=\"\" class=\"wp-image-29355\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/06cc53dc-851d-40a6-a6d3-2e78866332a3.png 896w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/06cc53dc-851d-40a6-a6d3-2e78866332a3-480x298.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 896px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Se apriamo il browser all&#8217;indirizzo <a href=\"http:\/\/localhost:3000\/api\/test\" rel=\"nofollow\">http:\/\/localhost:3000\/api\/test<\/a>, vedremo il risultato giusto:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.tolist.net\/Storage\/d6559c44-6647-4f0f-9bca-1cfdc44a4451\/Articles\/20cc6cb2-8fad-4418-9a10-6173c97ca77a.png?w=1080\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Adesso possiamo modificare l&#8217;applicazione Angular per chiamare il servizio. In\u00a0<em>app.module.ts,<\/em>\u00a0presente nella cartella\u00a0<em>src\/app<\/em>, importiamo il modulo HTTP client:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimport { BrowserModule } from &#039;@angular\/platform-browser&#039;; \nimport { NgModule } from &#039;@angular\/core&#039;; \nimport { HttpClientModule } from &#039;@angular\/common\/http&#039;; \nimport { AppComponent } from &#039;.\/app.component&#039;; \n\u00a0\n@NgModule({ \n\u00a0\u00a0\u00a0\u00a0declarations: &#x5B; AppComponent ], \n\u00a0\u00a0\u00a0\u00a0imports: &#x5B; BrowserModule, HttpClientModule ], \n\u00a0\u00a0\u00a0\u00a0providers: &#x5B;], \n\u00a0\u00a0\u00a0\u00a0bootstrap: &#x5B;AppComponent] \n}) \nexport class AppModule { }\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">In app.component.ts, usiamo HTTP client per chiamare il servizio:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimport { Component } from &#039;@angular\/core&#039;; \nimport { HttpClient } from &#039;@angular\/common\/http&#039;; \n\u00a0\n@Component({ \n\u00a0\u00a0\u00a0\u00a0selector: &#039;app-root&#039;, \n\u00a0\u00a0\u00a0\u00a0templateUrl: &#039;.\/app.component.html&#039;, \n\u00a0\u00a0\u00a0\u00a0styleUrls: &#x5B;&#039;.\/app.component.css&#039;] \n}) \nexport class AppComponent { \n\u00a0\u00a0\u00a0\u00a0title = &#039;app&#039;; \n\u00a0\n\u00a0\u00a0\u00a0\u00a0constructor(httpClient: HttpClient) { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0httpClient.get(&#039;http:\/\/localhost:3000\/api\/test&#039;)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.subscribe(arg =&gt; this.title = arg); \n\u00a0\u00a0\u00a0\u00a0} \n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Ovviamente questo \u00e8 solo un esempio:&nbsp;non chiameremo mai un servizio direttamente da un componente, giusto?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lanciando l&#8217;applicazione Angular con il comando\u00a0<em>ng serve -o<\/em>, possiamo vedere il risultato nel browser:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"968\" height=\"721\" data-attachment-id=\"29359\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/attachment\/5bd11618-93a7-4d7d-92bb-976e6248a189\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/5bd11618-93a7-4d7d-92bb-976e6248a189.png?fit=968%2C721&amp;ssl=1\" data-orig-size=\"968,721\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"5bd11618-93a7-4d7d-92bb-976e6248a189\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/5bd11618-93a7-4d7d-92bb-976e6248a189.png?fit=968%2C721&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/5bd11618-93a7-4d7d-92bb-976e6248a189.png?resize=968%2C721&#038;ssl=1\" alt=\"\" class=\"wp-image-29359\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/5bd11618-93a7-4d7d-92bb-976e6248a189.png 968w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/5bd11618-93a7-4d7d-92bb-976e6248a189-480x358.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 968px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ok, funziona.&nbsp;Ma se dobbiamo lavorare su un progetto reale, \u00e8 importante automatizzare i task necessari ad eseguire e testare la nostra applicazione:&nbsp;quindi configuriamo&nbsp;<em>Gulp<\/em>&nbsp;per eseguire tutti i task necessari.&nbsp;<em>Gulp<\/em>&nbsp;\u00e8 un famoso task runner, molto semplice da usare perch\u00e9&nbsp;pu\u00f2 essere configurato usando&nbsp;JavaScript. Tutta la documentazione la trovate sul sito ufficiale:&nbsp;<a href=\"https:\/\/gulpjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/gulpjs.com\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Installiamo Gulp nel progetto con il comando&nbsp;<em>npm install gulp -D<\/em>. Abbiamo anche bisogno di alcuni plugin di&nbsp;Gulp, uno per la compilazione&nbsp;Typescript,&nbsp;<em>gulp-typescript,<\/em>&nbsp;e per l&#8217;esecuzione del server&nbsp;Node,&nbsp;<em>gulp-nodemon<\/em>:&nbsp;<em>npm install gulp-typescript gulp-nodemon -D<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adesso creiamo nella root del progetto un file chiamato\u00a0<em>gulpfile.js<\/em>, il file di configurazione di Gulp, e cominciamo a importare le dipendenze:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nvar gulp = require(&#039;gulp&#039;), \n\u00a0\u00a0\u00a0\u00a0ts = require(&#039;gulp-typescript&#039;), \n\u00a0\u00a0\u00a0\u00a0exec = require(&#039;child_process&#039;).exec, \n\u00a0\u00a0\u00a0\u00a0nodemon = require(&#039;gulp-nodemon&#039;); \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">L&#8217;oggetto exec sar\u00e0 utile per lanciare i comandi di Angular CLI. Creare un task in Gulp \u00e8 molto semplice, dobbiamo solo chiamare il metodo\u00a0<em>task<\/em>\u00a0con due parametri: il nome del task e la funzione\u00a0che sar\u00e0 eseguita quando il task sar\u00e0 invocato con il suo nome. Per esempio, per la compilazione Typescript del codice di backend, scriveremo:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\ngulp.task(&#039;backend&#039;, function () { \n\u00a0\u00a0\u00a0\u00a0return gulp.src(&#039;.\/server\/**\/*.ts&#039;)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.pipe(ts({ noImplicitAny: true, lib: &#x5B;&quot;es2015&quot;] \n\u00a0\u00a0\u00a0\u00a0}))\n\u00a0\u00a0\u00a0\u00a0.pipe(gulp.dest(&#039;dist\/&#039;)); \n});\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Il task si chiama \u2018backend\u2019, e nella funzione di callback prendiamo tutti i file della cartella server e li serviamo, con la funzione pipe, al compilatore Typescript, spostando il risultato della compilazione nella cartella chiamata&nbsp;<em>dist<\/em>. Adesso, se scriviamo nella finestra del terminale il comando&nbsp;<em>gulp tsc<\/em>, il task viene invocato ed eseguito.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adesso creiamo un nuovo task, chiamato\u00a0<em>frontend<\/em>, nel file di configurazione di Gulp per la build dell&#8217;applicazione Angular:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\ngulp.task(&#039;frontend&#039;, function (cb) { \n\u00a0\u00a0\u00a0\u00a0exec(&#039;ng build --prod -op=dist\/public&#039;, function (err, stdout, stderr) { \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(stdout); \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(stderr); \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cb(err); \n\u00a0\u00a0\u00a0\u00a0}); \n})\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Quindi, se eseguiamo nel\u00a0terminale il comando\u00a0<em>gulp frontend<\/em>, l&#8217;applicazione\u00a0Angular sar\u00e0 buildata\u00a0nella cartella\u00a0<em>dist\/public<\/em>. \u00c8\u00a0il momento di eseguire l&#8217;applicazione, quindi creiamo un nuovo task chiamato \u2018nodemon\u2019:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\ngulp.task(&#039;nodemon&#039;, function () { \n\u00a0\u00a0\u00a0\u00a0nodemon({ \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0script: &#039;dist\/server.js&#039;, \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ext: &#039;js&#039;, \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0env: { &#039;NODE_ENV&#039;: &#039;development&#039; } \n\u00a0\u00a0\u00a0\u00a0}) \n});\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Nodemon \u00e8 un monitor NodeJS:\u00a0esegue lo\u00a0script\u00a0<em>dist\/server.js<\/em>\u00a0e fa ripartire il server Node se il file cambia. Nel teminale, eseguiamo\u00a0<em>gulp\u00a0nodemon\u00a0<\/em>per far partire l&#8217;applicazione:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"897\" height=\"559\" data-attachment-id=\"29362\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/attachment\/ff0bb1be-655a-4b71-ad3e-39b29055b73b\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ff0bb1be-655a-4b71-ad3e-39b29055b73b.png?fit=897%2C559&amp;ssl=1\" data-orig-size=\"897,559\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ff0bb1be-655a-4b71-ad3e-39b29055b73b\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ff0bb1be-655a-4b71-ad3e-39b29055b73b.png?fit=897%2C559&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ff0bb1be-655a-4b71-ad3e-39b29055b73b.png?resize=897%2C559&#038;ssl=1\" alt=\"\" class=\"wp-image-29362\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/ff0bb1be-655a-4b71-ad3e-39b29055b73b.png 897w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/ff0bb1be-655a-4b71-ad3e-39b29055b73b-480x299.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 897px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Adesso il nostro frontend \u00e8 disponibile sulla stessa porta del backend perch\u00e9\u00a0viene servito dal backend:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"966\" height=\"731\" data-attachment-id=\"29365\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/attachment\/5b0a9595-b5ce-459f-af83-d419db91cf79\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/5b0a9595-b5ce-459f-af83-d419db91cf79.png?fit=966%2C731&amp;ssl=1\" data-orig-size=\"966,731\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"5b0a9595-b5ce-459f-af83-d419db91cf79\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/5b0a9595-b5ce-459f-af83-d419db91cf79.png?fit=966%2C731&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/5b0a9595-b5ce-459f-af83-d419db91cf79.png?resize=966%2C731&#038;ssl=1\" alt=\"\" class=\"wp-image-29365\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/5b0a9595-b5ce-459f-af83-d419db91cf79.png 966w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/5b0a9595-b5ce-459f-af83-d419db91cf79-480x363.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 966px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ma noi siamo perfezionisti, quindi creiamo un nuovo task Gulp per ricompilare il backend se i file Typescript cambiano:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\ngulp.task(&#039;watch&#039;, &#x5B;&#039;backend&#039;], function () { \n\u00a0\u00a0\u00a0\u00a0gulp.watch(&#039;.\/server\/**\/*.ts&#039;, &#x5B;&#039;backend&#039;]); \n});\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">E, dato che se creiamo un task con il nome\u00a0<em>default,\u00a0<\/em>possiamo richiamarlo con il comando\u00a0<em>gulp<\/em>\u00a0senza parametri, possiamo creare l&#8217;ultimo task per richiamare tutti i task gi\u00e0 creati:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\ngulp.task(&#039;default&#039;, &#x5B;&#039;frontend&#039;, &#039;backend&#039;, &#039;watch&#039;, &#039;nodemon&#039;]);\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">In questo modo, dobbiamo solo eseguire il comando&nbsp;<em>gulp<\/em>&nbsp;nel terminale! Tutto il codice \u00e8 disponibile sul mio GitHub:&nbsp;<a href=\"https:\/\/github.com\/apomic80\/angular_node_typescript\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/apomic80\/angular_node_typescript&nbsp;&nbsp;<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A presto<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Un semplice startup project per creare una applicazione Angular che usa NodeJS e Typescript per il backend<\/p>\n","protected":false},"author":196716248,"featured_media":29350,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637374],"tags":[688637387,688637495,688637412,688637445],"class_list":["post-29349","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-angular","tag-nodejs","tag-typescript","tag-vscode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular, NodeJS e Typescript insieme - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular, NodeJS e Typescript insieme - Blexin\" \/>\n<meta property=\"og:description\" content=\"Un semplice startup project per creare una applicazione Angular che usa NodeJS e Typescript per il backend\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-23T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-13T08:40:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"273\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michele Aponte\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michele Aponte\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/\"},\"author\":{\"name\":\"Michele Aponte\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"headline\":\"Angular, NodeJS e Typescript insieme\",\"datePublished\":\"2018-10-23T22:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/\"},\"wordCount\":1090,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&ssl=1\",\"keywords\":[\"Angular\",\"NodeJS\",\"Typescript\",\"VScode\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/\",\"name\":\"Angular, NodeJS e Typescript insieme - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&ssl=1\",\"datePublished\":\"2018-10-23T22:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&ssl=1\",\"width\":1024,\"height\":273},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/angular-nodejs-e-typescript-insieme\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular, NodeJS e Typescript insieme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\",\"name\":\"Michele Aponte\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"caption\":\"Michele Aponte\"},\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/author\\\/michele-aponteblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular, NodeJS e Typescript insieme - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/","og_locale":"it_IT","og_type":"article","og_title":"Angular, NodeJS e Typescript insieme - Blexin","og_description":"Un semplice startup project per creare una applicazione Angular che usa NodeJS e Typescript per il backend","og_url":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/","og_site_name":"Blexin","article_published_time":"2018-10-23T22:00:00+00:00","article_modified_time":"2021-01-13T08:40:52+00:00","og_image":[{"width":1024,"height":273,"url":"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&ssl=1","type":"image\/jpeg"}],"author":"Michele Aponte","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Michele Aponte","Tempo di lettura stimato":"7 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/"},"author":{"name":"Michele Aponte","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"headline":"Angular, NodeJS e Typescript insieme","datePublished":"2018-10-23T22:00:00+00:00","dateModified":"2021-01-13T08:40:52+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/"},"wordCount":1090,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&ssl=1","keywords":["Angular","NodeJS","Typescript","VScode"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/","url":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/","name":"Angular, NodeJS e Typescript insieme - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&ssl=1","datePublished":"2018-10-23T22:00:00+00:00","dateModified":"2021-01-13T08:40:52+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&ssl=1","width":1024,"height":273},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/angular-nodejs-e-typescript-insieme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"Angular, NodeJS e Typescript insieme"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/it\/#website","url":"https:\/\/blexin.com\/it\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005","name":"Michele Aponte","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","caption":"Michele Aponte"},"url":"https:\/\/blexin.com\/it\/author\/michele-aponteblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/317bf26c-e817-40f6-a2e8-873bb02f32b9.jpg?fit=1024%2C273&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7Dn","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/29349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/users\/196716248"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/comments?post=29349"}],"version-history":[{"count":12,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/29349\/revisions"}],"predecessor-version":[{"id":29377,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/29349\/revisions\/29377"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/29350"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=29349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=29349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=29349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}