{"id":3776,"date":"2020-09-15T08:15:31","date_gmt":"2020-09-15T08:15:31","guid":{"rendered":"https:\/\/bezkoder.com\/?p=3776"},"modified":"2023-10-16T03:54:48","modified_gmt":"2023-10-16T03:54:48","slug":"angular-10-node-express-postgresql","status":"publish","type":"post","link":"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/","title":{"rendered":"Angular 10 + Node.js Express + PostgreSQL example: CRUD App"},"content":{"rendered":"<p>In this tutorial, I will show you how to build a full-stack (Angular 10 + Node.js + Express + PostgreSQL) example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is an Angular App with HTTPClient.<\/p>\n<p>Newer versions:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-11-node-js-express-postgresql\/\">Angular 11 + Node.js Express + PostgreSQL example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-12-node-js-express-postgresql\/\">Angular 12 + Node.js Express + PostgreSQL example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-13-node-js-express-postgresql\/\">Angular 13 + Node.js Express + PostgreSQL example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-14-node-js-express-postgresql\/\">Angular 14 + Node.js Express + PostgreSQL example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-15-node-js-express-postgresql\/\">Angular 15 + Node.js Express + PostgreSQL example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-16-node-js-express-postgresql\/\">Angular 16 + Node.js Express + PostgreSQL example<\/a><\/p>\n<p>Related Posts:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/node-js-express-angular-10-jwt-auth\/\">Angular 10 + Node.js Express: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/server-side-pagination-node-js-angular\/\">Server side Pagination with Node.js and Angular<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-10-node-js-file-upload\/\">Angular 10 + Node.js Express: File Upload example<\/a><\/p>\n<p>Run both projects in one place:<br \/>\n<a href=\"https:\/\/www.bezkoder.com\/integrate-angular-10-node-js\/\">How to Integrate Angular 10 with Node.js Restful Services<\/a><\/p>\n<p>Serverless with Firebase:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-10-firebase-crud\/\">Angular 10 Firebase CRUD Realtime Database<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-10-firestore-crud-angularfire\/\">Angular 10 Firestore CRUD with AngularFireStore<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/firebase-storage-angular-10-file-upload\/\">Angular 10 File Upload Firebase Storage: Display\/Delete Files example<\/a><\/p>\n<p><!--more--><br \/>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#Angular_10_Nodejs_Express_PostgreSQL_example\">Angular 10 + Node.js + Express + PostgreSQL example<\/a><\/li><li><a href=\"#Full-stack_CRUD_App_Architecture\">Full-stack CRUD App Architecture<\/a><\/li><li><a href=\"#Video\">Video<\/a><\/li><li><a href=\"#Nodejs_Express_Back-end\">Node.js Express Back-end<\/a><ul><li><a href=\"#Overview\">Overview<\/a><\/li><li><a href=\"#Project_Structure\">Project Structure<\/a><\/li><li><a href=\"#Implementation\">Implementation<\/a><ul><li><a href=\"#Create_Nodejs_App\">Create Node.js App<\/a><\/li><li><a href=\"#Setup_Express_web_server\">Setup Express web server<\/a><\/li><li><a href=\"#Configure_PostgreSQL_database_038_Sequelize\">Configure PostgreSQL database &#038; Sequelize<\/a><\/li><li><a href=\"#Initialize_Sequelize\">Initialize Sequelize<\/a><\/li><li><a href=\"#Define_the_Sequelize_Model\">Define the Sequelize Model<\/a><\/li><li><a href=\"#Create_the_Controller\">Create the Controller<\/a><\/li><li><a href=\"#Run_the_Nodejs_Express_Server\">Run the Node.js Express Server<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#Angular_10_Front-end\">Angular 10 Front-end<\/a><ul><li><a href=\"#Overview-2\">Overview<\/a><\/li><li><a href=\"#Project_Structure-2\">Project Structure<\/a><\/li><li><a href=\"#Implementation-2\">Implementation<\/a><ul><li><a href=\"#Setup_Angular_10_Project\">Setup Angular 10 Project<\/a><\/li><li><a href=\"#Set_up_App_Module\">Set up App Module<\/a><\/li><li><a href=\"#Define_Routes_for_Angular_AppRoutingModule\">Define Routes for Angular AppRoutingModule<\/a><\/li><li><a href=\"#Create_Data_Service\">Create Data Service<\/a><\/li><li><a href=\"#Create_Angular_Components\">Create Angular Components<\/a><\/li><li><a href=\"#Run_the_Angular_10_App\">Run the Angular 10 App<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#Source_Code\">Source Code<\/a><\/li><li><a href=\"#Conclusion\">Conclusion<\/a><\/li><\/ul><\/div>\n<\/p>\n<h2><span id=\"Angular_10_Nodejs_Express_PostgreSQL_example\">Angular 10 + Node.js + Express + PostgreSQL example<\/span><\/h2>\n<p>We will build a full-stack Tutorial Application in that:<\/p>\n<ul>\n<li>Tutorial has id, title, description, published status.<\/li>\n<li>User can create, retrieve, update, delete Tutorials.<\/li>\n<li>There is a search box for finding Tutorials by title.<\/li>\n<\/ul>\n<p>Here are screenshots of the example.<\/p>\n<p>&#8211; Add an object:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-create.png\" alt=\"angular-10-node-express-postgresql-create\" width=\"548\" height=\"343\" class=\"alignnone size-full wp-image-3777 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-create.png\" alt=\"angular-10-node-express-postgresql-create\" width=\"548\" height=\"343\" class=\"alignnone size-full wp-image-3777 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-create.png 548w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-create-300x188.png 300w\" sizes=\"(max-width: 548px) 100vw, 548px\" \/><\/noscript><\/p>\n<p>&#8211; Retrieve all Tutorials:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-retrieve-all.png\" alt=\"angular-10-node-express-postgresql-retrieve-all\" width=\"688\" height=\"512\" class=\"alignnone size-full wp-image-3778 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-retrieve-all.png\" alt=\"angular-10-node-express-postgresql-retrieve-all\" width=\"688\" height=\"512\" class=\"alignnone size-full wp-image-3778 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-retrieve-all.png 688w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-retrieve-all-300x223.png 300w\" sizes=\"(max-width: 688px) 100vw, 688px\" \/><\/noscript><\/p>\n<p>&#8211; Click on <strong>Edit<\/strong> button to update a Tutorial:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-update.png\" alt=\"angular-10-node-express-postgresql-update\" width=\"486\" height=\"420\" class=\"alignnone size-full wp-image-3779 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-update.png\" alt=\"angular-10-node-express-postgresql-update\" width=\"486\" height=\"420\" class=\"alignnone size-full wp-image-3779 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-update.png 486w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-update-300x259.png 300w\" sizes=\"(max-width: 486px) 100vw, 486px\" \/><\/noscript><\/p>\n<p>On this Page, you can:<\/p>\n<ul>\n<li>change status to <strong>Published<\/strong> using <strong>Publish<\/strong> button<\/li>\n<li>delete the Tutorial using <strong>Delete<\/strong> button<\/li>\n<li>update the Tutorial details with <strong>Update<\/strong> button<\/li>\n<\/ul>\n<p>If you want to implement Reactive Form Validation, please visit:<br \/>\n<a href=\"https:\/\/bezkoder.com\/angular-10-form-validation\/\">Angular 10 Form Validation example (Reactive Forms)<\/a><\/p>\n<p>&#8211; Search Tutorials by title:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-search.png\" alt=\"angular-10-node-express-postgresql-search\" width=\"686\" height=\"412\" class=\"alignnone size-full wp-image-3780 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-search.png\" alt=\"angular-10-node-express-postgresql-search\" width=\"686\" height=\"412\" class=\"alignnone size-full wp-image-3780 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-search.png 686w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-search-300x180.png 300w\" sizes=\"(max-width: 686px) 100vw, 686px\" \/><\/noscript><\/p>\n<h2><span id=\"Full-stack_CRUD_App_Architecture\">Full-stack CRUD App Architecture<\/span><\/h2>\n<p>We&#8217;re gonna build the application with following architecture:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-crud-architecture.png\" alt=\"angular-10-node-express-postgresql-crud-architecture\" width=\"700\" height=\"248\" class=\"alignnone size-full wp-image-3781 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-crud-architecture.png\" alt=\"angular-10-node-express-postgresql-crud-architecture\" width=\"700\" height=\"248\" class=\"alignnone size-full wp-image-3781 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-crud-architecture.png 700w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-crud-architecture-300x106.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/noscript><\/p>\n<p>\u2013 Node.js Express exports REST APIs &#038; interacts with PostgreSQL Database using Sequelize ORM.<br \/>\n\u2013 Angular Client sends HTTP Requests and retrieves HTTP Responses using <em>HTTPClient<\/em>, consume data on the components. Angular Router is used for navigating to pages.<\/p>\n<h2><span id=\"Video\">Video<\/span><\/h2>\n<p>This is our Angular 10 Node.js PostgreSQL application demo and brief instruction, running with Express Rest Apis:<\/p>\n<p><iframe class=\"lazyload\" width=\"560\" height=\"315\" data-src=\"https:\/\/www.youtube.com\/embed\/YXfixWQApDA?rel=0\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2><span id=\"Nodejs_Express_Back-end\">Node.js Express Back-end<\/span><\/h2>\n<h3><span id=\"Overview\">Overview<\/span><\/h3>\n<p>These are APIs that Node.js Express App will export:<\/p>\n<div class=\"table-responsive\">\n<table  class=\"table table-hover  table table-hover table table-hover\"  width=\"100%\">\n<thead>\n<tr>\n<th>Methods<\/th>\n<th>Urls<\/th>\n<th>Actions<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>GET<\/td>\n<td>api\/tutorials<\/td>\n<td>get all Tutorials<\/td>\n<\/tr>\n<tr>\n<td>GET<\/td>\n<td>api\/tutorials\/:id<\/td>\n<td>get Tutorial by <code>id<\/code><\/td>\n<\/tr>\n<tr>\n<td>POST<\/td>\n<td>api\/tutorials<\/td>\n<td>add new Tutorial<\/td>\n<\/tr>\n<tr>\n<td>PUT<\/td>\n<td>api\/tutorials\/:id<\/td>\n<td>update Tutorial by <code>id<\/code><\/td>\n<\/tr>\n<tr>\n<td>DELETE<\/td>\n<td>api\/tutorials\/:id<\/td>\n<td>remove Tutorial by <code>id<\/code><\/td>\n<\/tr>\n<tr>\n<td>DELETE<\/td>\n<td>api\/tutorials<\/td>\n<td>remove all Tutorials<\/td>\n<\/tr>\n<tr>\n<td>GET<\/td>\n<td>api\/tutorials?title=[kw]<\/td>\n<td>find all Tutorials which title contains <code>'kw'<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3><span id=\"Project_Structure\">Project Structure<\/span><\/h3>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-js-express-postgresql-server-project-structure.png\" alt=\"angular-10-node-js-express-postgresql-server-project-structure\" width=\"260\" height=\"356\" class=\"alignnone size-full wp-image-3782 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-js-express-postgresql-server-project-structure.png\" alt=\"angular-10-node-js-express-postgresql-server-project-structure\" width=\"260\" height=\"356\" class=\"alignnone size-full wp-image-3782 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-js-express-postgresql-server-project-structure.png 260w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-js-express-postgresql-server-project-structure-219x300.png 219w\" sizes=\"(max-width: 260px) 100vw, 260px\" \/><\/noscript><\/p>\n<p>&#8211; <em>db.config.js<\/em> exports configuring parameters for PostgreSQL connection &#038; Sequelize.<br \/>\n&#8211; <strong>Express<\/strong> web server in <em>server.js<\/em> where we configure CORS, initialize &#038; run Express REST APIs.<br \/>\n&#8211; Next, we add configuration for PostgreSQL database in <strong>models<\/strong>\/<em>index.js<\/em>, create <strong>Sequelize<\/strong> data model in <strong>models<\/strong>\/<em>tutorial.model.js<\/em>.<br \/>\n&#8211; Tutorial controller in <strong>controllers<\/strong>.<br \/>\n&#8211; Routes for handling all CRUD operations (including custom finder) in <em>tutorial.routes.js<\/em>.<\/p>\n<h3><span id=\"Implementation\">Implementation<\/span><\/h3>\n<h4><span id=\"Create_Nodejs_App\">Create Node.js App<\/span><\/h4>\n<p>First, we create a folder:<\/p>\n<pre><code>$ mkdir nodejs-express-sequelize-postgresql\r\n$ cd nodejs-express-sequelize-postgresql\r\n<\/code><\/pre>\n<p>Next, we initialize the Node.js App with a <em>package.json<\/em> file:<\/p>\n<pre><code>npm init\r\n\r\nname: (nodejs-express-sequelize-postgresql) \r\nversion: (1.0.0) \r\ndescription: Node.js Rest Apis with Express, Sequelize & PostgreSQL.\r\nentry point: (index.js) server.js\r\ntest command: \r\ngit repository: \r\nkeywords: nodejs, express, sequelize, postgresql, rest, api\r\nauthor: bezkoder\r\nlicense: (ISC)\r\n\r\nIs this ok? (yes) yes\r\n<\/code><\/pre>\n<p>We need to install necessary modules: <code>express<\/code>, <code>sequelize<\/code>, <code>pg<\/code>, <code>pg-hstore<\/code> and <code>body-parser<\/code>.<br \/>\nRun the command:<\/p>\n<pre><code>npm install express sequelize pg pg-hstore body-parser cors --save\r\n<\/code><\/pre>\n<p>*<code>pg<\/code> for PostgreSQL and <code>pg-hstore<\/code> for converting data into the PostgreSQL hstore format.<\/p>\n<h4><span id=\"Setup_Express_web_server\">Setup Express web server<\/span><\/h4>\n<p>In the root folder, let&#8217;s create a new <em>server.js<\/em> file:<\/p>\n<pre><code class=\"language-js\">const express = require(\"express\");\r\nconst bodyParser = require(\"body-parser\");\r\nconst cors = require(\"cors\");\r\n\r\nconst app = express();\r\n\r\nvar corsOptions = {\r\n  origin: \"http:\/\/localhost:8081\"\r\n};\r\n\r\napp.use(cors(corsOptions));\r\n\r\n\/\/ parse requests of content-type - application\/json\r\napp.use(bodyParser.json());\r\n\r\n\/\/ parse requests of content-type - application\/x-www-form-urlencoded\r\napp.use(bodyParser.urlencoded({ extended: true }));\r\n\r\n\/\/ simple route\r\napp.get(\"\/\", (req, res) => {\r\n  res.json({ message: \"Welcome to bezkoder application.\" });\r\n});\r\n\r\n\/\/ set port, listen for requests\r\nconst PORT = process.env.PORT || 8080;\r\napp.listen(PORT, () => {\r\n  console.log(`Server is running on port ${PORT}.`);\r\n});\r\n<\/code><\/pre>\n<p>What we do are:<br \/>\n&#8211; import <code>express<\/code>, <code>body-parser<\/code> and <code>cors<\/code> modules:<\/p>\n<ul>\n<li>Express is for building the Rest apis<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/body-parser\">body-parser<\/a> helps to parse the request and create the <code>req.body<\/code> object<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/cors\">cors<\/a> provides Express middleware to enable CORS with various options.<\/li>\n<\/ul>\n<p>&#8211; create an Express app, then add <code>body-parser<\/code> and <code>cors<\/code> middlewares using <code>app.use()<\/code> method. Notice that we set origin: <code>http:\/\/localhost:8081<\/code>.<br \/>\n&#8211; define a GET route which is simple for test.<br \/>\n&#8211; listen on port 8080 for incoming requests.<\/p>\n<p>Now let&#8217;s run the app with command: <code>node server.js<\/code>.<br \/>\nOpen your browser with url <a href=\"http:\/\/localhost:8080\/\">http:\/\/localhost:8080\/<\/a>, you will see:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/node-js-express-sequelize-postgresql-example-setup-server.png\" alt=\"node-js-express-sequelize-postgresql-example-setup-server\" width=\"394\" height=\"144\" class=\"alignnone size-full wp-image-2143 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/node-js-express-sequelize-postgresql-example-setup-server.png\" alt=\"node-js-express-sequelize-postgresql-example-setup-server\" width=\"394\" height=\"144\" class=\"alignnone size-full wp-image-2143 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/node-js-express-sequelize-postgresql-example-setup-server.png 394w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/node-js-express-sequelize-postgresql-example-setup-server-300x110.png 300w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/><\/noscript><\/p>\n<p>Yeah, the first step is done. We&#8217;re gonna work with Sequelize in the next section.<\/p>\n<h4><span id=\"Configure_PostgreSQL_database_038_Sequelize\">Configure PostgreSQL database &#038; Sequelize<\/span><\/h4>\n<p>In the <em>app<\/em> folder, we create a separate <em>config<\/em> folder for configuration with <em>db.config.js<\/em> file like this:<\/p>\n<pre><code class=\"language-js\">module.exports = {\r\n  HOST: \"localhost\",\r\n  USER: \"postgres\",\r\n  PASSWORD: \"123\",\r\n  DB: \"testdb\",\r\n  dialect: \"postgres\",\r\n  pool: {\r\n    max: 5,\r\n    min: 0,\r\n    acquire: 30000,\r\n    idle: 10000\r\n  }\r\n};\r\n<\/code><\/pre>\n<p>First five parameters are for PostgreSQL connection.<br \/>\n<code>pool<\/code> is optional, it will be used for Sequelize connection pool configuration:<\/p>\n<ul>\n<li><code>max<\/code>: maximum number of connection in pool<\/li>\n<li><code>min<\/code>: minimum number of connection in pool<\/li>\n<li><code>idle<\/code>: maximum time, in milliseconds, that a connection can be idle before being released<\/li>\n<li><code>acquire<\/code>: maximum time, in milliseconds, that pool will try to get connection before throwing error<\/li>\n<\/ul>\n<p>For more details, please visit <a href=\"https:\/\/sequelize.org\/master\/class\/lib\/sequelize.js~Sequelize.html#instance-constructor-constructor\">API Reference for the Sequelize constructor<\/a>.<\/p>\n<h4><span id=\"Initialize_Sequelize\">Initialize Sequelize<\/span><\/h4>\n<p>We&#8217;re gonna initialize Sequelize in <strong>app<\/strong>\/<strong>models<\/strong> folder that will contain model in the next step.<\/p>\n<p>Now create <strong>app<\/strong>\/<strong>models<\/strong>\/<em>index.js<\/em> with the following code:<\/p>\n<pre><code class=\"language-js\">const dbConfig = require(\"..\/config\/db.config.js\");\r\n\r\nconst Sequelize = require(\"sequelize\");\r\nconst sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {\r\n  host: dbConfig.HOST,\r\n  dialect: dbConfig.dialect,\r\n  operatorsAliases: false,\r\n\r\n  pool: {\r\n    max: dbConfig.pool.max,\r\n    min: dbConfig.pool.min,\r\n    acquire: dbConfig.pool.acquire,\r\n    idle: dbConfig.pool.idle\r\n  }\r\n});\r\n\r\nconst db = {};\r\n\r\ndb.Sequelize = Sequelize;\r\ndb.sequelize = sequelize;\r\n\r\ndb.tutorials = require(\".\/tutorial.model.js\")(sequelize, Sequelize);\r\n\r\nmodule.exports = db;\r\n<\/code><\/pre>\n<p>Don&#8217;t forget to call <code>sync()<\/code> method in <em>server.js<\/em>:<\/p>\n<pre><code class=\"language-js\">...\r\nconst app = express();\r\napp.use(...);\r\n\r\nconst db = require(\".\/app\/models\");\r\ndb.sequelize.sync();\r\n\r\n...\r\n<\/code><\/pre>\n<p>In development, you may need to drop existing tables and re-sync database. Just use <code>force: true<\/code> as following code:<\/p>\n<pre><code class=\"language-js\">\r\ndb.sequelize.sync({ force: true }).then(() => {\r\n  console.log(\"Drop and re-sync db.\");\r\n});\r\n<\/code><\/pre>\n<h4><span id=\"Define_the_Sequelize_Model\">Define the Sequelize Model<\/span><\/h4>\n<p>In <em>models<\/em> folder, create <em>tutorial.model.js<\/em> file like this:<\/p>\n<pre><code class=\"language-js\">module.exports = (sequelize, Sequelize) => {\r\n  const Tutorial = sequelize.define(\"tutorial\", {\r\n    title: {\r\n      type: Sequelize.STRING\r\n    },\r\n    description: {\r\n      type: Sequelize.STRING\r\n    },\r\n    published: {\r\n      type: Sequelize.BOOLEAN\r\n    }\r\n  });\r\n\r\n  return Tutorial;\r\n};\r\n<\/code><\/pre>\n<p>This Sequelize Model represents <strong>tutorials<\/strong> table in PostgreSQL database. These columns will be generated automatically: <em>id<\/em>, <em>title<\/em>, <em>description<\/em>, <em>published<\/em>, <em>createdAt<\/em>, <em>updatedAt<\/em>.<\/p>\n<p>After initializing Sequelize, we don&#8217;t need to write CRUD functions, Sequelize supports all of them:<\/p>\n<ul>\n<li>create a new Tutorial: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-create\">create<\/a>(object)<\/code><\/li>\n<li>find a Tutorial by id: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-findByPk\">findByPk<\/a>(id)<\/code><\/li>\n<li>get all Tutorials: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-findAll\">findAll<\/a>()<\/code><\/li>\n<li>update a Tutorial by id: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-update\">update<\/a>(data, where: { id: id })<\/code><\/li>\n<li>remove a Tutorial: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-destroy\">destroy<\/a>(where: { id: id })<\/code><\/li>\n<li>remove all Tutorials: <code>destroy(where: {})<\/code><\/li>\n<li>find all Tutorials by title: <code>findAll({ where: { title: ... } })<\/code><\/li>\n<\/ul>\n<p>These functions will be used in our Controller.<\/p>\n<p>We can improve the example by adding Comments for each Tutorial. It is the One-to-Many Relationship and I write a tutorial for this at:<br \/>\n<a href=\"https:\/\/bezkoder.com\/sequelize-associate-one-to-many\/\">Node.js Sequelize Associations: One-to-Many example<\/a><\/p>\n<p>Or you can add Tags for each Tutorial and add Tutorials to Tag (Many-to-Many Relationship):<br \/>\n<a href=\"https:\/\/bezkoder.com\/sequelize-associate-many-to-many\/\">Node.js Sequelize Associations: Many-to-Many example<\/a><\/p>\n<h4><span id=\"Create_the_Controller\">Create the Controller<\/span><\/h4>\n<p>Inside <strong>app<\/strong>\/<strong>controllers<\/strong> folder, let&#8217;s create <em>tutorial.controller.js<\/em> with these CRUD functions:<\/p>\n<ul>\n<li>create<\/li>\n<li>findAll<\/li>\n<li>findOne<\/li>\n<li>update<\/li>\n<li>delete<\/li>\n<li>deleteAll<\/li>\n<li>findAllPublished<\/li>\n<\/ul>\n<pre><code class=\"language-js\">const db = require(\"..\/models\");\r\nconst Tutorial = db.tutorials;\r\nconst Op = db.Sequelize.Op;\r\n\r\n\/\/ Create and Save a new Tutorial\r\nexports.create = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Retrieve all Tutorials from the database.\r\nexports.findAll = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Find a single Tutorial with an id\r\nexports.findOne = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Update a Tutorial by the id in the request\r\nexports.update = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Delete a Tutorial with the specified id in the request\r\nexports.delete = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Delete all Tutorials from the database.\r\nexports.deleteAll = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Find all published Tutorials\r\nexports.findAllPublished = (req, res) => {\r\n  \r\n};\r\n<\/code><\/pre>\n<p>You can continue with step by step to implement this Node.js Express App in the post:<br \/>\n<a href=\"https:\/\/bezkoder.com\/node-express-sequelize-postgresql\/\">Node.js Express &#038; PostgreSQL: CRUD Rest APIs example with Sequelize<\/a><\/p>\n<h4><span id=\"Run_the_Nodejs_Express_Server\">Run the Node.js Express Server<\/span><\/h4>\n<p>Run our Node.js application with command: <code>node server.js<\/code>.<\/p>\n<h2><span id=\"Angular_10_Front-end\">Angular 10 Front-end<\/span><\/h2>\n<h3><span id=\"Overview-2\">Overview<\/span><\/h3>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-crud-front-end-overview.png\" alt=\"angular-10-node-express-postgresql-crud-front-end-overview\" width=\"700\" height=\"208\" class=\"alignnone size-full wp-image-3783 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-crud-front-end-overview.png\" alt=\"angular-10-node-express-postgresql-crud-front-end-overview\" width=\"700\" height=\"208\" class=\"alignnone size-full wp-image-3783 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-crud-front-end-overview.png 700w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-express-postgresql-crud-front-end-overview-300x89.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/noscript><\/p>\n<p>\u2013 The <code>App<\/code> component is a container with <code>router-outlet<\/code>. It has navbar that links to routes paths via <code>routerLink<\/code>.<\/p>\n<p>\u2013 <code>TutorialsList<\/code> component gets and displays Tutorials.<br \/>\n\u2013 <code>Tutorial<\/code> component has form for editing Tutorial&#8217;s details based on <code>:id<\/code>.<br \/>\n\u2013 <code>AddTutorial<\/code> component has form for submission new Tutorial.<\/p>\n<p>\u2013 These Components call <code>TutorialService<\/code> methods which use Angular <code>HTTPClient<\/code> to make HTTP requests and receive responses.<\/p>\n<h3><span id=\"Project_Structure-2\">Project Structure<\/span><\/h3>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2019\/12\/angular-10-node-js-express-postgresql-angular-project-structure.png\" alt=\"angular-10-node-js-express-postgresql-angular-project-structure\" width=\"320\" height=\"644\" class=\"alignnone size-full wp-image-3838 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2019\/12\/angular-10-node-js-express-postgresql-angular-project-structure.png\" alt=\"angular-10-node-js-express-postgresql-angular-project-structure\" width=\"320\" height=\"644\" class=\"alignnone size-full wp-image-3838 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2019\/12\/angular-10-node-js-express-postgresql-angular-project-structure.png 320w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2019\/12\/angular-10-node-js-express-postgresql-angular-project-structure-149x300.png 149w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/noscript><\/p>\n<p>&#8211; There are 3 components: <code>tutorials-list<\/code>, <code>tutorial-details<\/code>, <code>add-tutorial<\/code>.<br \/>\n&#8211; <code>tutorial.service<\/code> has methods for sending HTTP requests to the Apis.<br \/>\n&#8211; <strong>app-routing.module.ts<\/strong> defines routes for each component.<br \/>\n&#8211; <code>app<\/code> component contains router view and navigation bar.<br \/>\n&#8211; <code>app.module.ts<\/code> declares Angular components and import necessary modules.<\/p>\n<h3><span id=\"Implementation-2\">Implementation<\/span><\/h3>\n<h4><span id=\"Setup_Angular_10_Project\">Setup Angular 10 Project<\/span><\/h4>\n<p>Let&#8217;s open cmd and use Angular CLI to create a new Angular Project as following command:<\/p>\n<pre><code class=\"language-bash\">ng new Angular10Crud\r\n? Would you like to add Angular routing? Yes\r\n? Which stylesheet format would you like to use? CSS\r\n<\/code><\/pre>\n<p>We also need to generate some Components and Services:<\/p>\n<pre><code class=\"language-bash\">ng g s services\/tutorial\r\n\r\nng g c components\/add-tutorial\r\nng g c components\/tutorial-details\r\nng g c components\/tutorials-list\r\n<\/code><\/pre>\n<h4><span id=\"Set_up_App_Module\">Set up App Module<\/span><\/h4>\n<p>Open <em>app.module.ts<\/em> and import <code>FormsModule<\/code>, <code>HttpClientModule<\/code>:<\/p>\n<pre><code class=\"language-js\">...\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { HttpClientModule } from '@angular\/common\/http';\r\n\r\n@NgModule({\r\n  declarations: [ ... ],\r\n  imports: [\r\n    ...\r\n    FormsModule,\r\n    HttpClientModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/code><\/pre>\n<h4><span id=\"Define_Routes_for_Angular_AppRoutingModule\">Define Routes for Angular AppRoutingModule<\/span><\/h4>\n<p>There are 3 main routes:<br \/>\n&#8211; <code>\/tutorials<\/code> for <code>tutorials-list<\/code> component<br \/>\n&#8211; <code>\/tutorials\/:id<\/code> for <code>tutorial-details<\/code> component<br \/>\n&#8211; <code>\/add<\/code> for <code>add-tutorial<\/code> component<\/p>\n<p><em>app-routing.module.ts<\/em><\/p>\n<pre><code class=\"language-js\">import { NgModule } from '@angular\/core';\r\nimport { Routes, RouterModule } from '@angular\/router';\r\nimport { TutorialsListComponent } from '.\/components\/tutorials-list\/tutorials-list.component';\r\nimport { TutorialDetailsComponent } from '.\/components\/tutorial-details\/tutorial-details.component';\r\nimport { AddTutorialComponent } from '.\/components\/add-tutorial\/add-tutorial.component';\r\n\r\nconst routes: Routes = [\r\n  { path: '', redirectTo: 'tutorials', pathMatch: 'full' },\r\n  { path: 'tutorials', component: TutorialsListComponent },\r\n  { path: 'tutorials\/:id', component: TutorialDetailsComponent },\r\n  { path: 'add', component: AddTutorialComponent }\r\n];\r\n\r\n@NgModule({\r\n  imports: [RouterModule.forRoot(routes)],\r\n  exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n<\/code><\/pre>\n<h4><span id=\"Create_Data_Service\">Create Data Service<\/span><\/h4>\n<p>This service will use Angular <code>HTTPClient<\/code> to send HTTP requests.<br \/>\nYou can see that its functions includes CRUD operations and finder method.<\/p>\n<p><strong>services<\/strong>\/<em>tutorial.service.ts<\/em><\/p>\n<pre><code class=\"language-js\">import { Injectable } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\nimport { Observable } from 'rxjs';\r\n\r\nconst baseUrl = 'http:\/\/localhost:8080\/api\/tutorials';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class TutorialService {\r\n\r\n  constructor(private http: HttpClient) { }\r\n\r\n  getAll(): Observable&lt;any> {\r\n    return this.http.get(baseUrl);\r\n  }\r\n\r\n  get(id): Observable&lt;any> {\r\n    return this.http.get(`${baseUrl}\/${id}`);\r\n  }\r\n\r\n  create(data): Observable&lt;any> {\r\n    return this.http.post(baseUrl, data);\r\n  }\r\n\r\n  update(id, data): Observable&lt;any> {\r\n    return this.http.put(`${baseUrl}\/${id}`, data);\r\n  }\r\n\r\n  delete(id): Observable&lt;any> {\r\n    return this.http.delete(`${baseUrl}\/${id}`);\r\n  }\r\n\r\n  deleteAll(): Observable&lt;any> {\r\n    return this.http.delete(baseUrl);\r\n  }\r\n\r\n  findByTitle(title): Observable&lt;any> {\r\n    return this.http.get(`${baseUrl}?title=${title}`);\r\n  }\r\n}\r\n<\/code><\/pre>\n<h4><span id=\"Create_Angular_Components\">Create Angular Components<\/span><\/h4>\n<p>As you&#8217;ve known before, there are 3 components corresponding to 3 routes defined in <code>AppRoutingModule<\/code>.<\/p>\n<ul>\n<li>Add new Item Component<\/li>\n<li>List of items Component<\/li>\n<li>Item details Component<\/li>\n<\/ul>\n<p>You can continue with step by step to implement this Angular App in the post:<br \/>\n<a href=\"https:\/\/www.bezkoder.com\/angular-10-crud-app\/\">Angular 10 CRUD Application example with Web API<\/a><\/p>\n<p>Other versions:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-crud-app\/\">Angular 8 CRUD example with Web API<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-11-crud-app\/\">Angular 11 CRUD example with Web API<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-12-crud-app\/\">Angular 12 CRUD example with Web API<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-13-crud-example\/\">Angular 13 CRUD example with Web API<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-14-crud-example\/\">Angular 14 CRUD example with Web API<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-15-crud-example\/\">Angular 15 CRUD example with Web API<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-16-crud-example\/\">Angular 16 CRUD example with Web API<\/a><\/p>\n<h4><span id=\"Run_the_Angular_10_App\">Run the Angular 10 App<\/span><\/h4>\n<p>You can run this App with command: <code>ng serve --port 8081<\/code>.<br \/>\nIf the process is successful, open Browser with Url: <code>http:\/\/localhost:8081\/<\/code> and check it.<\/p>\n<h2><span id=\"Source_Code\">Source Code<\/span><\/h2>\n<p>You can find Github source code for this tutorial at: <a href=\"https:\/\/www.githubcode.com\/angular-express-github\/\">Angular + Express Github<\/a><\/p>\n<h2><span id=\"Conclusion\">Conclusion<\/span><\/h2>\n<p>Now we have an overview of Angular 10 + Node.js Express + PostgreSQL example when building a full-stack CRUD App.<\/p>\n<p>We also take a look at client-server architecture for REST API using Express &#038; Sequelize ORM, as well as Angular 10 project structure for building a front-end app to make HTTP requests and consume responses.<\/p>\n<p>Next tutorials show you more details about how to implement the system:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/node-express-sequelize-postgresql\/\">Back-end<\/a><\/p>\n<p>&#8211; Front-end:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-10-crud-app\/\">Using Angular 10<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-11-crud-app\/\">Using Angular 11<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-12-crud-app\/\">Using Angular 12<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-13-crud-example\/\">Using Angular 13<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-14-crud-example\/\">Using Angular 14<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-15-crud-example\/\">Using Angular 15<\/a><\/li>\n<li><a href=\"https:\/\/www.bezkoder.com\/angular-16-crud-example\/\">Using Angular 16<\/a><\/li>\n<\/ul>\n<p>You will want to know how to run both projects in one place:<br \/>\n<a href=\"https:\/\/www.bezkoder.com\/integrate-angular-10-node-js\/\">How to Integrate Angular 10 with Node.js Restful Services<\/a><\/p>\n<p>More Practice with:<br \/>\n&#8211; Security: <a href=\"https:\/\/www.bezkoder.com\/node-js-express-angular-10-jwt-auth\/\">Angular 10 + Node.js Express: JWT Authentication &#038; Authorization example<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/server-side-pagination-node-js-angular\/\">Server side Pagination with Node.js and Angular<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-10-node-js-file-upload\/\">Angular 10 + Node.js Express: File Upload example<\/a><\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/10\/server-side-pagination-node-js-angular-ui-change-size.png\" alt=\"server-side-pagination-node-js-angular-ui-change-size\" width=\"660\" height=\"610\" class=\"alignnone size-full wp-image-4841 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/10\/server-side-pagination-node-js-angular-ui-change-size.png\" alt=\"server-side-pagination-node-js-angular-ui-change-size\" width=\"660\" height=\"610\" class=\"alignnone size-full wp-image-4841 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/10\/server-side-pagination-node-js-angular-ui-change-size.png 660w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/10\/server-side-pagination-node-js-angular-ui-change-size-300x277.png 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/noscript><\/p>\n<p>Or Serverless with Firebase:<br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-10-firebase-crud\/\">Angular 10 Firebase CRUD Realtime Database<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/angular-10-firestore-crud-angularfire\/\">Angular 10 Firestore CRUD with AngularFireStore<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.bezkoder.com\/firebase-storage-angular-10-file-upload\/\">Angular 10 File Upload Firebase Storage: Display\/Delete Files example<\/a><\/p>\n<p>Happy learning, see you again!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I will show you how to build a full-stack (Angular 10 + Node.js + Express + PostgreSQL) example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is an Angular App with HTTPClient. Newer versions: &#8211; Angular 11 + Node.js Express + PostgreSQL example &#8211; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3785,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[103,49,27],"tags":[104,178,82,38,28,37,39,84],"class_list":["post-3776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-full-stack","category-node-js","tag-angular","tag-angular-10","tag-crud","tag-express","tag-node-js","tag-postgresql","tag-rest-api","tag-sequelize"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular 10 + Node.js Express + PostgreSQL example: CRUD App - BezKoder<\/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:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 10 + Node.js Express + PostgreSQL example: CRUD App - BezKoder\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will show you how to build a full-stack (Angular 10 + Node.js + Express + PostgreSQL) example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is an Angular App with HTTPClient. Newer versions: &#8211; Angular 11 + Node.js Express + PostgreSQL example &#8211; [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/\" \/>\n<meta property=\"og:site_name\" content=\"BezKoder\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bezkoder\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-15T08:15:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-16T03:54:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-js-express-postgresql-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"bezkoder\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"bezkoder\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/\",\"url\":\"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/\",\"name\":\"Angular 10 + Node.js Express + PostgreSQL example: CRUD App - BezKoder\",\"isPartOf\":{\"@id\":\"https:\/\/www.bezkoder.com\/#website\"},\"datePublished\":\"2020-09-15T08:15:31+00:00\",\"dateModified\":\"2023-10-16T03:54:48+00:00\",\"author\":{\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bezkoder.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular 10 + Node.js Express + PostgreSQL example: CRUD App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bezkoder.com\/#website\",\"url\":\"https:\/\/www.bezkoder.com\/\",\"name\":\"BezKoder\",\"description\":\"Mobile &amp; Web App Development Tutorials\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bezkoder.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a\",\"name\":\"bezkoder\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g\",\"caption\":\"bezkoder\"},\"url\":\"https:\/\/www.bezkoder.com\/author\/bezkoder\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular 10 + Node.js Express + PostgreSQL example: CRUD App - BezKoder","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:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/","og_locale":"en_US","og_type":"article","og_title":"Angular 10 + Node.js Express + PostgreSQL example: CRUD App - BezKoder","og_description":"In this tutorial, I will show you how to build a full-stack (Angular 10 + Node.js + Express + PostgreSQL) example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is an Angular App with HTTPClient. Newer versions: &#8211; Angular 11 + Node.js Express + PostgreSQL example &#8211; [&hellip;]","og_url":"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/","og_site_name":"BezKoder","article_publisher":"https:\/\/www.facebook.com\/bezkoder","article_published_time":"2020-09-15T08:15:31+00:00","article_modified_time":"2023-10-16T03:54:48+00:00","og_image":[{"width":750,"height":410,"url":"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/07\/angular-10-node-js-express-postgresql-feature-image.png","type":"image\/png"}],"author":"bezkoder","twitter_card":"summary_large_image","twitter_misc":{"Written by":"bezkoder","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/","url":"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/","name":"Angular 10 + Node.js Express + PostgreSQL example: CRUD App - BezKoder","isPartOf":{"@id":"https:\/\/www.bezkoder.com\/#website"},"datePublished":"2020-09-15T08:15:31+00:00","dateModified":"2023-10-16T03:54:48+00:00","author":{"@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a"},"breadcrumb":{"@id":"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bezkoder.com\/angular-10-node-express-postgresql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bezkoder.com\/"},{"@type":"ListItem","position":2,"name":"Angular 10 + Node.js Express + PostgreSQL example: CRUD App"}]},{"@type":"WebSite","@id":"https:\/\/www.bezkoder.com\/#website","url":"https:\/\/www.bezkoder.com\/","name":"BezKoder","description":"Mobile &amp; Web App Development Tutorials","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bezkoder.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a","name":"bezkoder","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g","caption":"bezkoder"},"url":"https:\/\/www.bezkoder.com\/author\/bezkoder\/"}]}},"_links":{"self":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts\/3776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/comments?post=3776"}],"version-history":[{"count":0,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts\/3776\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/media\/3785"}],"wp:attachment":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/media?parent=3776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/categories?post=3776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/tags?post=3776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}