{"id":2720,"date":"2019-04-11T16:47:33","date_gmt":"2019-04-11T16:47:33","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2720"},"modified":"2020-10-15T22:31:35","modified_gmt":"2020-10-15T22:31:35","slug":"full-stack-typescript-with-ionic-angular-and-nestjs-part-1","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1","title":{"rendered":"Full-Stack TypeScript with Ionic, Angular, and NestJS Part 1"},"content":{"rendered":"

Introduction<\/h2>\n

Welcome to the first post in a new series we\u2019re kicking off all about building a full stack TypeScript app using Ionic, Angular and NestJS.<\/p>\n

TypeScript is a powerful language that is a superset of JavaScript, with some additional features added to help build out large scale applications. One of my favorite features of TypeScript is its optional static type checking. I was a longtime static language dev (C#) before coming to the front-end, and even though I enjoyed the dynamic nature of JavaScript, I would often run into runtime errors and bugs in my client-side code because there was no type checking to help ensure the system I wrote was correct. TypeScript helps fix this by providing a way to add types to your variables and objects that are evaluated at dev time, but removed and turned into plain JavaScript when running in the browser.<\/p>\n

<\/p>\n

Beyond type checking, TypeScript also helps you speed up your development by providing code completion and refactoring, as well as letting you use modern JavaScript language features that might not be available in all browsers yet.<\/p>\n

Ionic and Angular developers have adopted TypeScript as their primary language for their client-side development for a few years now. However, TypeScript can run anywhere JavaScript can, which includes the server!<\/p>\n

Front-end devs often turn to Node for their backend needs. The reasons are numerous, as Node provides a great runtime that works with the language with which they are most familiar (JavaScript). A couple of years ago, I was starting a new Node project and wanted to use TypeScript in it because I was curious if I could use TypeScript’s decorators to help define routes and place them directly on the controllers. Additionally, I liked this pattern from ASP.Net MVC and figured it would be possible with TypeScript.<\/p>\n

It didn’t take much searching until I found a little, somewhat unknown, project called NestJS. Nest billed itself as a Node framework built with the power of TypeScript. I was immediately intrigued!<\/p>\n

Meet NestJS<\/h2>\n

\"\"

NestJS<\/a> (just Nest from here on out), is a Node framework meant to build server-side applications. Not only is it a framework, but it is also a platform to meet many backend application needs, like writing APIs, building microservices, or doing real-time communications through web sockets. For us Ionic devs, it is a great solution to write our backends with because it fits in so well with the rest of our ecosystem.<\/p>\n

Nest is also heavily influenced by Angular, and, as an Angular dev, you will immediately find its concepts familiar. The creators of Nest strived to make the learning curve as small as possible, while still taking advantage of many higher level concepts such as modules, controllers, and dependency injection.<\/p>\n

However, this doesn\u2019t mean that Nest is only for Angular devs. On its own, Nest is a powerful framework that anyone looking to build server-side applications on Node should consider. Moreover, Nest is also similar to other MVC (model, view, controller) frameworks out there, like ASP.Net MVC and Spring. Developers coming from other enterprise frameworks will find Nest familiar.<\/p>\n

Since you use TypeScript (or JavaScript) to write a Nest application, one of the most intriguing features of Nest is the ability to use the same language on the client that you use on the server. This helps speed up development as your developers don’t need to context switch between the idiosyncrasies different languages can have. The unified language also opens doors for some potential code reuse between your front-end and back-end.<\/p>\n

Are you interested in taking Nest for a spin and building out a backend for you Ionic apps? Great, let’s get started!<\/p>\n

Our App<\/h2>\n

A typical full-stack tutorial has you build out a todo app. Todo apps are way too lame to waste on great tech such as Ionic, Angular, and Nest. So, in this tutorial series, we are going to build an app for space rangers \ud83d\ude80. Our app will provide a list of missions a space ranger can go on, and have them enter their own missions. Once finished, they can mark their mission as complete.<\/p>\n

You might be thinking this sounds like another todo app, but it’s not. It’s way cooler. It has space kitties. We will call it GoSpaceRanger.<\/p>\n

Getting Started<\/h2>\n

I’m going to assume you are all set to get started with Ionic and Angular, but if not, head over to our getting started guide<\/a> to get those setup.<\/p>\n

First, create a new directory called go-space-ranger<\/code> wherever you like to do your developer things and cd<\/code> into it. We will create two applications (an Ionic and a Nest app) via CLIs in this directory.<\/p>\n

Nest also comes with a CLI that is relatively similar to that of Ionic and Angular. Install it via NPM:<\/p>\n

npm i -g @nestjs\/cli\n<\/code><\/pre>\n
Use the Nest CLI to kick off a new app:<\/p>\n
nest new gsr-server\n<\/code><\/pre>\n
When asked, select NPM as your package manager.<\/p>\n
Go into the gar-server<\/code> directory Nest created, and start up the development server by running:<\/p>\n
npm run start:dev\n<\/code><\/pre>\n
This command kicks off a development server and loads your Nest app on a default port of 3000. Open up your browser to http:\/\/localhost:3000, and you should see:<\/p>\n
\"\"
Open up the gsr-server<\/code> directory in your editor of choice. I’ll be showing VS Code in this tutorial and will talk about some tips on how to use it, but feel free to use what you are comfortable with. Let’s take a brief tour of the default Nest project.<\/p>\n
The Nest Project Structure<\/h2>\n
\"\"
There is nothing too crazy going on here. By default, Nest gives you a few goodies out of the box, that you would typically have to set up on your own. For code formatting and code style, Nest includes a Prettier and TSLint setup. Nodemon is included to recompile your app on each code change. Typescript is all set up as well. The config files for all these tools have sensible defaults, but feel free to modify them to fit your style.<\/p>\n
The src<\/code> folder contains all your app code.<\/p>\n
The main.ts<\/code> is the file that bootstraps your application. By default, Nest uses Express as the web framework to serve the HTTP requests. If you needed to do any additional configuration or add any Express middleware, you would do it here.<\/p>\n
The app.module.ts<\/code> file is familiar to Angular devs. The module serves the same concept here in Nest that it does in Angular. Modules provide logical separation in your app and give the configuration needed for each section.<\/p>\n
When it comes down to it, Nest implements an MVC (model, view, controller) design pattern. In MVC, controllers listen in for incoming requests, call into services for data access and business logic, then serve out the models from the services back to the client.<\/p>\n
The app.controller.ts<\/code> file is a simple implementation of a controller:<\/p>\n
\"\"
Controllers are just pure ES6 classes that have a @Controller<\/code> decorator on them. The decorator takes a string param that specifies the route the controller should listen for requests at. Since it is omitted here, this AppController<\/code> listens to the root path ‘\/’.<\/p>\n
Nest also uses decorators on methods in a controller to designate which HTTP verbs (Get, Post, Put, Delete, etc…) a method should respond to. In our AppController<\/code>, when a GET request comes in, Nest responds by invoking the getHello<\/code> method.<\/p>\n
Our controller has a service named appService<\/code> injected into it. A Nest service is another ES6 class that is registered with Nest’s dependency injection framework as a provider.<\/p>\n
\"\"
This simple class has a single method that returns a string. If your server is still running (via NPM), go ahead and modify the string, then go back to your browser and refresh. Since the server is running in dev mode, Nodemon automatically recompiles and restarts the app every time a file changes.<\/p>\n
Now that we know the basic structure of a Nest app, let’s create some of our own services and controllers.<\/p>\n
Your First Nest Service and Controller<\/h2>\n
Our GoSpaceRanger app returns back a list of “missions” that our space rangers can respond to. So, to kick off our new app, let’s create a model to represent a mission. Create a new folder in src<\/code> named models<\/code>, then create a new mission.model.ts<\/code> and paste in the following code:<\/p>\n
export class Mission {\n  id?: number;\n  title: string;\n  reward: number;\n  active: boolean;\n}\n<\/code><\/pre>\n
Next, we can use the Nest CLI to generate a service and controller for us:<\/p>\n
nest g service missions\nnest g controller missions\n<\/code><\/pre>\n
\"\"
These commands will create a controller and a service file, along with spec files for testing.<\/p>\n
For now, the Missions Service returns a hard-coded list of missions. Update the class in themission.service.ts<\/code> file to the following:<\/p>\n
@Injectable()\nexport class MissionsService {\n  missions: Mission[] = [\n    {\n      id: 1,\n      title: 'Rescue cat stuck in asteroid',\n      reward: 500,\n      active: true,\n    },\n    {\n      id: 2,\n      title: 'Escort Royal Fleet',\n      reward: 5000,\n      active: true,\n    },\n    {\n      id: 3,\n      title: 'Pirates attacking the station',\n      reward: 2500,\n      active: false,\n    },\n  ];\n\n  async getMissions(): Promise<Mission[]> {\n    return this.missions;\n  }\n}\n<\/code><\/pre>\n
Here, we have a few missions defined in an array and a getMissions<\/code> method, which simply returns the missions array.<\/p>\n
Next, update the missions.controller.ts<\/code> controller to include the method that handles the GET request:<\/p>\n
@Controller('missions')\nexport class MissionsController {\n  constructor(private missionsService: MissionsService) {}\n\n  @Get()\n  getMissions() {\n    return this.missionsService.getMissions();\n  }\n}\n<\/code><\/pre>\n
Now, if you back to your browser and visit http:\/\/localhost:3000\/missions, you should see the list of missions returned in JSON format.<\/p>\n
However, trying to access this data from a web app (like what we will build in a moment), you would get the following error in the browser:<\/p>\n
\"\"
This error is because the browsers same origin policy is kicking in and denying you to make an XHR request to a domain that the web page did not originate from. To get around this, we enable Cross-Origin Resource Sharing (CORS). Fortunately, Nest makes this easy, and all we have to do is open up the main.ts<\/code> file and add app.enableCors()<\/code> right after app is defined like so:<\/p>\n
\"\"
With that in place, we are ready to move forward making requests from our upcoming Ionic app. We will begin to build that out next.<\/p>\n
Create GoSpaceRanger Ionic App<\/h2>\n
In your main project folder (the parent folder where we created the gsr-server<\/code> Nest project), run the following command to create a new Ionic project:<\/p>\n
ionic start gsr-client sidemenu\n<\/code><\/pre>\n
\n  When asked if you want to install the AppFlow SDK, select no.\n<\/p><\/blockquote>\n
This command creates an Ionic project using the side menu template. Our app consists of a simple list page and a detail page, so starting with the side menu template gives us what we need initially, and we will use the side menu itself in the future.<\/p>\n
Start up the development server:<\/p>\n
ionic serve\n<\/code><\/pre>\n
After building the app, your browser should automatically open to http:\/\/localhost:8100\/home and show you the blank starter:<\/p>\n
\"\"
Let us create a new Angular service via the Ionic CLI:<\/p>\n
ionic g service services\/missions\n<\/code><\/pre>\n
\"\"
Look familiar? This code is nearly the same as our initial Nest service (the lone difference being the providedIn<\/code> option passed in the Injector, which Nest doesn’t support yet).<\/p>\n
In our service, we make the HTTP request to \/missions<\/code> and return the data. Update the class inmissions.service.ts<\/code> with the following:<\/p>\n
@Injectable({\n  providedIn: 'root'\n})\nexport class MissionsService {\n  constructor(private httpClient: HttpClient) { }\n\n  getMissions() {\n    return this.httpClient.get('http:\/\/localhost:3000\/missions');\n  }\n}\n<\/code><\/pre>\n
\n  Since we are using HttpClient, make sure to add HttpClientModule (from @angular\/common\/http<\/code>) in the app module’s list of imports.\n<\/p><\/blockquote>\n
Next, modify the home.page.ts<\/code> file to call into the service and save the results to a local observable:<\/p>\n
export class HomePage implements OnInit {\n  missions: Observable<any>;\n\n  constructor(private missionsService: MissionsService) {}\n\n  ngOnInit() {\n    this.missions = this.missionsService.getMissions();\n  }\n}\n<\/code><\/pre>\n
And to wrap it all up, replace the home.page.html<\/code> template with the following:<\/p>\n
<ion-header>\n  <ion-toolbar>\n  <ion-buttons slot="start">\n      <ion-menu-button><\/ion-menu-button>\n  <\/ion-buttons>\n    <ion-title>Missions<\/ion-title>\n  <\/ion-toolbar>\n<\/ion-header>\n\n<ion-content>\n  <ion-list>\n    <ion-item *ngFor="let mission of (missions | async)">\n      <ion-label>\n        <h2>{{ mission.title }}<\/h2>\n        <p>{{ mission.reward | currency }}<\/p>\n      <\/ion-label>\n      <ion-icon slot="start" icon="rocket" color="primary"><\/ion-icon>\n    <\/ion-item>\n  <\/ion-list>\n<\/ion-content>\n<\/code><\/pre>\n
Here, we have a reasonably simple Ionic page with a list that displays a few list items, each one with one of the missions coming back from the Nest API.<\/p>\n
\"\"
Now that our space rangers can view their missions, we will wrap part one of this series. So far, we’ve done a lot: We learned why TypeScript is beneficial not only on the client side but also on the server side. We also learned how to leverage the power of TypeScript on Node by using the Nest framework. And, we built a simple yet functional Ionic app that displays data served up from the Nest API. Exciting stuff!<\/p>\n
If you would like to download what we have completed so far, grab the code on GitHub<\/a>.<\/p>\n
In part two<\/a>, we dive deeper into the various building blocks Nest gives us and build out more of our API.<\/p>\n
Happy Coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction Welcome to the first post in a new series we\u2019re kicking off all about building a full stack TypeScript app using Ionic, Angular and NestJS. TypeScript is a powerful language that is a superset of JavaScript, with some additional features added to help build out large scale applications. One of my favorite features of […]<\/p>\n","protected":false},"author":66,"featured_media":2732,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[121],"tags":[60,3,148],"class_list":["post-2720","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-angular","tag-ionic","tag-nest"],"acf":[],"yoast_head":"\nFull-Stack TypeScript with Ionic, Angular, and NestJS Part 1 - Ionic Blog<\/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:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Full-Stack TypeScript with Ionic, Angular, and NestJS Part 1\" \/>\n<meta property=\"og:description\" content=\"Introduction Welcome to the first post in a new series we\u2019re kicking off all about building a full stack TypeScript app using Ionic, Angular and NestJS. TypeScript is a powerful language that is a superset of JavaScript, with some additional features added to help build out large scale applications. One of my favorite features of […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-11T16:47:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-15T22:31:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/04\/ionic-nestjs-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"798\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ely Lucas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elylucas\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ely Lucas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1\"},\"author\":{\"name\":\"Ely Lucas\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d4a019b9a30f6c3db51b24803ab2be9b\"},\"headline\":\"Full-Stack TypeScript with Ionic, Angular, and NestJS Part 1\",\"datePublished\":\"2019-04-11T16:47:33+00:00\",\"dateModified\":\"2020-10-15T22:31:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1\"},\"wordCount\":1971,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/04\/ionic-nestjs-1.png\",\"keywords\":[\"Angular\",\"Ionic\",\"Nest\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1\",\"url\":\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1\",\"name\":\"Full-Stack TypeScript with Ionic, Angular, and NestJS Part 1 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/04\/ionic-nestjs-1.png\",\"datePublished\":\"2019-04-11T16:47:33+00:00\",\"dateModified\":\"2020-10-15T22:31:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/04\/ionic-nestjs-1.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/04\/ionic-nestjs-1.png\",\"width\":1440,\"height\":798},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Full-Stack TypeScript with Ionic, Angular, and NestJS Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d4a019b9a30f6c3db51b24803ab2be9b\",\"name\":\"Ely Lucas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g\",\"caption\":\"Ely Lucas\"},\"sameAs\":[\"https:\/\/x.com\/elylucas\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/ely\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Full-Stack TypeScript with Ionic, Angular, and NestJS Part 1 - Ionic Blog","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:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1","og_locale":"en_US","og_type":"article","og_title":"Full-Stack TypeScript with Ionic, Angular, and NestJS Part 1","og_description":"Introduction Welcome to the first post in a new series we\u2019re kicking off all about building a full stack TypeScript app using Ionic, Angular and NestJS. TypeScript is a powerful language that is a superset of JavaScript, with some additional features added to help build out large scale applications. One of my favorite features of […]","og_url":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1","og_site_name":"Ionic Blog","article_published_time":"2019-04-11T16:47:33+00:00","article_modified_time":"2020-10-15T22:31:35+00:00","og_image":[{"width":1440,"height":798,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/04\/ionic-nestjs-1.png","type":"image\/png"}],"author":"Ely Lucas","twitter_card":"summary_large_image","twitter_creator":"@elylucas","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Ely Lucas","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1"},"author":{"name":"Ely Lucas","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d4a019b9a30f6c3db51b24803ab2be9b"},"headline":"Full-Stack TypeScript with Ionic, Angular, and NestJS Part 1","datePublished":"2019-04-11T16:47:33+00:00","dateModified":"2020-10-15T22:31:35+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1"},"wordCount":1971,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/04\/ionic-nestjs-1.png","keywords":["Angular","Ionic","Nest"],"articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1","url":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1","name":"Full-Stack TypeScript with Ionic, Angular, and NestJS Part 1 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/04\/ionic-nestjs-1.png","datePublished":"2019-04-11T16:47:33+00:00","dateModified":"2020-10-15T22:31:35+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/04\/ionic-nestjs-1.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/04\/ionic-nestjs-1.png","width":1440,"height":798},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/full-stack-typescript-with-ionic-angular-and-nestjs-part-1#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Full-Stack TypeScript with Ionic, Angular, and NestJS Part 1"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d4a019b9a30f6c3db51b24803ab2be9b","name":"Ely Lucas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g","caption":"Ely Lucas"},"sameAs":["https:\/\/x.com\/elylucas"],"url":"https:\/\/ionic.io\/blog\/author\/ely"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/04\/ionic-nestjs-1.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/66"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2720"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2720\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2732"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}