{"id":29378,"date":"2018-10-24T00:00:00","date_gmt":"2018-10-23T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/angular-nodejs-e-typescript-insieme\/"},"modified":"2021-05-20T19:32:06","modified_gmt":"2021-05-20T17:32:06","slug":"angular-nodejs-and-typescript-together","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/","title":{"rendered":"Angular, NodeJS and Typescript together"},"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=\"29351\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/attachment\/317bf26c-e817-40f6-a2e8-873bb02f32b9-2\/\" 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-29351\" 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\">A new customer called me for a project on an embedded device, where the purpose&nbsp;is to provide a simple user interface to control the execution of a workflow on the device. After discarding Asp.Net Core, because it&nbsp;does not support ARM processor at the moment, we proposed Angular for the front-end and Node for the backend. The real execution of the workflow is demanded to a core project written in C++, of course:&nbsp;our job&nbsp;is to create a user interface to create and display&nbsp;the workflow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The customer accepted the use of Node but, since he knows the .Net platform, he asked us to use Typescript for the backend too. This is not a problem, but I think it can be interesting to share the setup of an Angular project with Node and Typescript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As a first step, we install the prerequisites:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>NodeJS from&nbsp;<em><a href=\"https:\/\/nodejs.org\/\" rel=\"nofollow\">https:\/\/nodejs.org\/<\/a><\/em><\/li><li>Angular CLI with the command&nbsp;<em>npm<\/em><em>&nbsp;install -g @angular\/<\/em><em>cli<\/em><\/li><li>Typescript with the command&nbsp;<em>npm<\/em><em>&nbsp;install -g typescript<\/em><\/li><li>Gulp with the command&nbsp;<em>npm<\/em><em>&nbsp;install -g gulp<\/em><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">We create a new project with the Angular CLI&nbsp;(for example, with the command ng new angular-node-typescript), and open the project with our preferred code editor, in my case 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\">We create a folder&nbsp;<em>\u201cserver\u201d<\/em>&nbsp;in the project root, where we place&nbsp;the backend code, and create in that folder a new file named&nbsp;<em>server.ts<\/em>. As framework for the NodeJS backend we use ExpressJS, which can be installed in our project with following commands:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>npm<\/em><em>&nbsp;install &#8211;save express<\/em>&nbsp;for ExpressJS, the &#8211;save option add this required package to our configuration in package.json<\/li><li><em>npm<\/em><em>&nbsp;install &#8211;save body-parser<\/em>&nbsp;as ExpressJS middleware. Its role is to extract the entire body portion of an incoming request stream and expose it on req.body. Very useful.<\/li><li><em>npm install @types\/node @types\/body-parser @types\/express -D<\/em>, for the Typescript definition files for node, body-parse rand express. The -D option saves these dependencies as&nbsp;development dependencies, because they are useful only during the development process (in package.json we will find these dependencies in the devDependency block)<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Return to the&nbsp;<em>server.ts<\/em>&nbsp;file and import the necessary library:<\/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\">Now we can create the Server class:<\/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\">And call the static method&nbsp;<em>bootstrap<\/em>&nbsp;to create the Server object:<\/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\">Now we can init our web server, creating a private method of this class, named&nbsp;<em>config<\/em>. Here we configure body-parser middleware, set the public folder where we will publish the Angular project, configure the port where the server will listen for HTTP request and start the 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\">Our backend is a collection of REST web api, so we need to configure the routes of the project. For this purpose, we can create a second private method&nbsp;in Server class, named&nbsp;<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\">As we can see, in the code&nbsp;we use the ExpressJS library middleware router to improve the maintenance of the project. We place&nbsp;the API implementation in a subfolder named&nbsp;<em>routes.<\/em>&nbsp;For our example, we can create a file&nbsp;<em>backendapi.ts&nbsp;<\/em>in this folder:<\/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\">Just a note on&nbsp;the last instruction of the&nbsp;<em>routes<\/em>&nbsp;method:<\/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\">This note permits to answer with the built Angular application to all the requests that have not been managed in another way. The Server constructor&nbsp;become, then, as follows:<\/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\">The server is ready:&nbsp;if we move into a server directory and run the command tsc server.ts, the Typescript compiler creates the&nbsp;<em>server.js<\/em>&nbsp;file, that, executed in node with the command&nbsp;<em>node<\/em>&nbsp;<em>server.js,&nbsp;<\/em>starts our 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=\"29356\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/attachment\/06cc53dc-851d-40a6-a6d3-2e78866332a3-2\/\" 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-29356\" 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\">If we open the browser at the address <a href=\"http:\/\/localhost:3000\/api\/test\" rel=\"nofollow\">http:\/\/localhost:3000\/api\/test<\/a>, we can display the right result:<\/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\">Now we can modify the Angular application to&nbsp;call&nbsp;the service. In&nbsp;app.module.ts, which is present in the src\/app folder, we import the HTTP client module:<\/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&nbsp;app.component.ts, we use the HTTP client to call the service:<\/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\">Obviously, this is only an example, we will never call a service directly from a component, right?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Launching the angular app with the command&nbsp;<em>ng serve -o<\/em>, we can see the result in the 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=\"29360\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/attachment\/5bd11618-93a7-4d7d-92bb-976e6248a189-2\/\" 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-29360\" 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, it works. But if we have to work on a real project, it&#8217;s important to automate all the tasks necessary to run and test our application:&nbsp;therefore, we configure&nbsp;<em>Gulp<\/em>&nbsp;to run all the needed tasks.&nbsp;<em>Gulp<\/em>&nbsp;is a famous task runner, very simple to use&nbsp;because we can configure it using JavaScript. You can find all the documentation&nbsp;on the official web site:&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\">We install Gulp in the project with the command&nbsp;<em>npm install gulp -D<\/em>. We need also some Gulp plugins, one for the Typescript compilation,&nbsp;<em>gulp-typescript<\/em>, e one for the Node server execution,&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\">Now create in the project root a file named&nbsp;<em>gulpfile.js<\/em>, the Gulp configuration file, and start importing the dependencies:<\/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\">The exec object will be useful to run the Angular CLI commands. Create a task in Gulp is very simple, we have only to call the task method with two parameters: the name of the task and the function that will be executed when the task is invoked by its name. For example, for the typescript configuration of the backend code, we will write:<\/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\">The task is named \u2018<em>backend<\/em>\u2019, and in the callback function we take all the file in the server folder and serve them, with the pipe function, to the typescript compiler, moving the result of the compilation in a folder named&nbsp;<em>dist<\/em>. Now, if we run in the terminal window the command&nbsp;<em>gulp tsc<\/em>, the task is invoked and executed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now we create a new task, named&nbsp;<em>frontend<\/em>, in the Gulp configuration file for the Angular application build:<\/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\">If we run the command&nbsp;<em>gulp frontend<\/em>&nbsp;in the terminal, the Angular application will be built in the folder&nbsp;<em>dist\/public<\/em>. It\u2019s time to run the application, then we create a new task named \u2018<em>nodemon<\/em>\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 is a NodeJS monitor: it executes the script&nbsp;<em>dist\/server.js<\/em>&nbsp;and restarts the node server if the file changes. In the terminal, we execute&nbsp;<em>gulp nodemon<\/em>, to start the application:<\/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=\"29363\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/attachment\/ff0bb1be-655a-4b71-ad3e-39b29055b73b-2\/\" 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-29363\" 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\">Now our frontend is available on the same port of the backend because is served by the 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=\"29366\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/attachment\/5b0a9595-b5ce-459f-af83-d419db91cf79-2\/\" 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-29366\" 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\">But we are perfectionist, so create a new Gulp task to recompile the backend if some Typescript file change:<\/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\">And, since if we create a task with the name&nbsp;<em>default<\/em>&nbsp;we can call it with the command&nbsp;<em>gulp<\/em>&nbsp;without parameter, we can create the last task to call all the already created tasks :<\/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 this way, we have only to run&nbsp;<em>gulp<\/em>&nbsp;in the terminal! All the code is available on my GitHub:&nbsp;<a href=\"https:\/\/github.com\/apomic80\/angular_node_typescript\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/apomic80\/angular_node_typescript<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See you soon<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>A simple startup project to create an Angular application that use NodeJS and Typescript for the backend<\/p>\n","protected":false},"author":196716248,"featured_media":29351,"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":"","_crdt_document":"","inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_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},"categories":[688637524],"tags":[688637390,688637496,688637413,688637448],"class_list":["post-29378","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","tag-angular-en","tag-nodejs-en","tag-typescript-en","tag-vscode-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular, NodeJS and Typescript together - 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\/en\/blog-en\/angular-nodejs-and-typescript-together\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular, NodeJS and Typescript together - Blexin\" \/>\n<meta property=\"og:description\" content=\"A simple startup project to create an Angular application that use NodeJS and Typescript for the backend\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/\" \/>\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-05-20T17:32:06+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=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michele Aponte\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/\"},\"author\":{\"name\":\"Michele Aponte\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"headline\":\"Angular, NodeJS and Typescript together\",\"datePublished\":\"2018-10-23T22:00:00+00:00\",\"dateModified\":\"2021-05-20T17:32:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/\"},\"wordCount\":1204,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/#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\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/\",\"name\":\"Angular, NodeJS and Typescript together - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/#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-05-20T17:32:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/#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\\\/en\\\/blog-en\\\/angular-nodejs-and-typescript-together\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular, NodeJS and Typescript together\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\",\"name\":\"Michele Aponte\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\\\/en\\\/author\\\/michele-aponteblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular, NodeJS and Typescript together - 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\/en\/blog-en\/angular-nodejs-and-typescript-together\/","og_locale":"en_US","og_type":"article","og_title":"Angular, NodeJS and Typescript together - Blexin","og_description":"A simple startup project to create an Angular application that use NodeJS and Typescript for the backend","og_url":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/","og_site_name":"Blexin","article_published_time":"2018-10-23T22:00:00+00:00","article_modified_time":"2021-05-20T17:32:06+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":{"Written by":"Michele Aponte","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/"},"author":{"name":"Michele Aponte","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"headline":"Angular, NodeJS and Typescript together","datePublished":"2018-10-23T22:00:00+00:00","dateModified":"2021-05-20T17:32:06+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/"},"wordCount":1204,"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/#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":"en-US"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/","url":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/","name":"Angular, NodeJS and Typescript together - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/#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-05-20T17:32:06+00:00","author":{"@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"breadcrumb":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blexin.com\/en\/blog-en\/angular-nodejs-and-typescript-together\/#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\/en\/blog-en\/angular-nodejs-and-typescript-together\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/en\/"},{"@type":"ListItem","position":2,"name":"Angular, NodeJS and Typescript together"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/en\/#website","url":"https:\/\/blexin.com\/en\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005","name":"Michele Aponte","image":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/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-7DQ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/29378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/users\/196716248"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/comments?post=29378"}],"version-history":[{"count":3,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/29378\/revisions"}],"predecessor-version":[{"id":32022,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/29378\/revisions\/32022"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media\/29351"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media?parent=29378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/categories?post=29378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/tags?post=29378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}