{"id":1998,"date":"2022-02-22T12:00:00","date_gmt":"2022-02-22T11:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/fleetmsv3-part-1-setup-angular-node-postgresql-and-angular-template\/"},"modified":"2026-08-28T15:32:23","modified_gmt":"2026-08-28T13:32:23","slug":"fleetmsv3-part-1-setup-angular-node-postgresql-and-angular-template","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/fleetmsv3-part-1-setup-angular-node-postgresql-and-angular-template\/","title":{"rendered":"FleetMSv3 \u2013 Part 1 \u2013 Setup Angular, Node, PostgreSQL and Angular Template"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Learn how to setup Angular, Node, PostgreSQL and Angular Template for FleetMSv3, including AdminLTE, scripts, stylesheets, and application configuration.<\/em><\/p>\n\n\n<h3>TL;DR<\/h3>\n<ul>\n<li>\n<p>Install and test Node.js, Angular, and PostgreSQL.<\/p>\n<\/li>\n<li>\n<p>Create the FleetMSv3 Angular application and configure routing.<\/p>\n<\/li>\n<li>\n<p>Install and configure the AdminLTE Angular template.<\/p>\n<\/li>\n<li>\n<p>Add the required AdminLTE CSS and JavaScript files to <code>angular.json<\/code>.<\/p>\n<\/li>\n<li>\n<p>Update <code>index.html<\/code> and <code>app.component.html<\/code> with the AdminLTE dashboard structure.<\/p>\n<\/li>\n<li>\n<p>Copy the required images into the Angular assets folder and update their paths.<\/p>\n<\/li>\n<\/ul>\n<p>FleetMS version 3 kicks off today!<\/p>\n<p>Here\u2019s the technology stack for FleetMS version 3.<\/p>\n<ul>\n<li>Angular\u00a0 for UI development<\/li>\n<li>Node.js for application middle-tier<\/li>\n<li>MongoDB, PostgreSQL for data persistence<\/li>\n<\/ul>\n<p>Additionally, we would be using the following tools and technologies<\/p>\n<ul>\n<li>Angular Material, PrimeNg and Bootstrap for UI design<\/li>\n<li>MongoDB for learning a bit about NoSQL document\u00a0 databases<\/li>\n<li>NGRX for state management in Angular<\/li>\n<li>GitHub for source control<\/li>\n<li>auth0\/angular-jwt library for authentication and authorization<\/li>\n<li>Amazon EC2, IAM, S3 etc.<\/li>\n<li>and lots more<\/li>\n<\/ul>\n<p>The following is covered here<\/p>\n<ol>\n<li><a href=\"#t1\">Install and Test Node.js, Angular and PostgreSQL<\/a><\/li>\n<li><a href=\"#t2\">Setup the AdminLTE 3.2 Angular Template<\/a><\/li>\n<li><a href=\"#t3\">Setting Up the Scripts and Stylesheets<\/a><\/li>\n<li><a href=\"#t4\">Modify the index.html and app.component.html<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t1\">1. Install and Test Node.js, Angular and PostgreSQL<\/strong><\/h4>\n<p>In this session, we will download and install Node, Angular and PostgreSQL.<\/p>\n<p><strong>Step 1<\/strong> \u2013 Download <a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener\">Node.js from here<\/a> and install it following the prompts.<\/p>\n<p><strong>Step 2<\/strong> \u2013 Install Angular using the CLI via this command<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">npm install <span style=\"color: #333333;\">-<\/span> g <span style=\"color: #555555; font-weight: bold;\">@angular<\/span><span style=\"color: #333333;\">\/<\/span>cli\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 3<\/strong>\u00a0 \u2013 Download and install PostgreSQL. <a href=\"https:\/\/www.postgresql.org\/download\/\" target=\"_blank\" rel=\"noopener\">Get it from here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t2\">2. Setup the AdminLTE 3.2 Angular Template<\/strong><\/h4>\n<p>For this application, we would be using the <a href=\"https:\/\/github.com\/ColorlibHQ\/AdminLTE\/releases\/tag\/v3.1.0\" target=\"_blank\" rel=\"noopener\">AdminLTE template version 3.0<\/a> from ColorLib and you can get it from <a href=\"https:\/\/github.com\/ColorlibHQ\/AdminLTE\/releases\/tag\/v3.1.0\" target=\"_blank\" rel=\"noopener\">here<\/a>. You can follow the steps below to set it up.<\/p>\n<p><strong>Step 1<\/strong> \u2013 Create an Angular application is some directory using this command:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">ng new fleetmsv3\n<\/pre>\n<p>You need to include routing.<\/p>\n<p><strong>Step 2<\/strong> \u2013 Navigate into the installed application and install the adminlte3 node modules using the command below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">npm install admin-lte@^3.2 --save\n<\/pre>\n<p>You can check that it installed by looking into the node_modules directory<\/p>\n<p><strong>Step 3<\/strong> \u2013 Build the application using the command<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">ng build\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 4<\/strong> \u2013 Fire up the application using the ng serve command as shown below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">ng serve --open\n<\/pre>\n<p>If it works, then thumbs up!<\/p>\n<p><strong>Step 5<\/strong> \u2013 Check your package.json file to make sure you have the admin-lte dependency<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t3\">3. Setting Up the Scripts and Stylesheets<\/strong><\/h4>\n<p>Now we need to actually setup the AdminLTE pages, scripts and stylesheets.<\/p>\n<p><strong>Step 1<\/strong> \u2013 Open one of the dashboard pages. Here, I choose index2.html. Open the page source and check the path of the included js and css files.<\/p>\n<p><strong>Step 2<\/strong> \u2013 Open the angular.json file and check the styles and scripts keys under the build section.<\/p>\n<p><strong>Step 3<\/strong> \u2013 Copy the <em><strong>css<\/strong><\/em> paths as given below to the styles section<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\">\"node_modules\/admin-lte\/plugins\/fontawesome-free\/css\/all.min.css\",\n\"node_modules\/admin-lte\/plugins\/overlayScrollbars\/css\/OverlayScrollbars.min.css\",\n\"node_modules\/admin-lte\/dist\/css\/adminlte.min.css\"\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 4<\/strong> \u2013 Copy the <strong><em>js<\/em><\/strong> paths as given below the scripts section.<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">\"node_modules\/admin-lte\/plugins\/jquery\/jquery.min.js\",\n\"node_modules\/admin-lte\/plugins\/bootstrap\/js\/bootstrap.bundle.min.js\",\n\"node_modules\/admin-lte\/plugins\/overlayScrollbars\/js\/jquery.overlayScrollbars.min.js\",\n\"node_modules\/admin-lte\/dist\/js\/adminlte.js\",\n\"node_modules\/admin-lte\/plugins\/jquery-mousewheel\/jquery.mousewheel.js\",\n\"node_modules\/admin-lte\/plugins\/raphael\/raphael.min.js\",\n\"node_modules\/admin-lte\/plugins\/jquery-mapael\/jquery.mapael.min.js\",\n\"node_modules\/admin-lte\/plugins\/jquery-mapael\/maps\/usa_states.min.js\",\n\"node_modules\/admin-lte\/plugins\/chart.js\/Chart.min.js\",\n\"node_modules\/admin-lte\/dist\/js\/demo.js\",\n\"node_modules\/admin-lte\/dist\/js\/pages\/dashboard2.js\"\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t4\">4. Modify the index.html and app.component.html<\/strong><\/h4>\n<p>Follow the steps to modify the index.html<\/p>\n<p><strong>Step 1<\/strong> \u2013 Open the index.html file and update the body class tag with the one in the<em><strong> index2.html<\/strong><\/em> from the AdminLTE template<\/p>\n<p><strong>Step 2<\/strong> \u2013 Open the app.component.html file and delete everything except the <strong><em>&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/em><\/strong> tags.<\/p>\n<p><strong>Step 3<\/strong> \u2013 Copy the rest of code inside the <strong><em>&lt;body&gt;&lt;\/body&gt;<\/em><\/strong> tag from the <strong><em>index2.html<\/em><\/strong> from the<strong><em> index2.html<\/em> <\/strong>in the AdminLTE template.<\/p>\n<p><strong>Step 4<\/strong> \u2013 Paste this code in the <strong><em>app.component.html<\/em><\/strong> file just before the <strong><em>&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/em><\/strong> tags.<\/p>\n<p><strong>Step 5<\/strong> \u2013 Copy the img folder located inside the <em><strong>admin-lte\/dist<\/strong><\/em> directory to the<strong><em> src\/assets<\/em><\/strong> folder<\/p>\n<p><strong>Step 6<\/strong> \u2013 Find this path <strong style=\"font-family: 'Source Sans Pro', Graphik, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 1.125rem;\"><em>&lt;img src=\u201ddist\/img\/user1-128\u00d7128.jpg\u201d alt=\u201dUser Avatar\u201dclass=\u201dimg-size-50 mr-3 img-circle\u201d&gt; <\/em><\/strong><\/p>\n<p>and change the src to <em><strong>\u201cassets\/img\/user1-128\u00d7128.jpg\u201d<\/strong><\/em><\/p>\n<p><em><strong>Step 7<\/strong> <\/em>\u2013 You should actually replace all occurrence of <span style=\"font-family: 'Source Sans Pro', Graphik, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 1.125rem;\"><strong><em>dist\/img\/<\/em><\/strong> with <em><strong>assets\/img\/. <\/strong><\/em><\/span>You can use find and replace to achieve this.<\/p>\n<p><strong>Step 8<\/strong> \u2013 Stop the application. Rebuild it and serve it up. Visit the home page, you will see the dashboard working perfectly well.<\/p>\n<p>There is a second method which is more flexible and easier to follow. <a href=\"https:\/\/kindsonthegenius.com\/blog\/fleetmsv3-part-1-setup-angular-node-postgresql-and-angular-template\/\" target=\"_blank\" rel=\"noopener\">Method 2 here<\/a><\/p>\n<h3>FAQs<\/h3>\n<p><strong>What technologies are used in FleetMSv3?<\/strong><\/p>\n<p>FleetMSv3 uses Angular for the UI, Node.js for the application middle tier, and MongoDB and PostgreSQL for data persistence.<\/p>\n<p><strong>How do I set up Angular for FleetMSv3?<\/strong><\/p>\n<p>Install Node.js, install Angular CLI, and create the application using the <code>ng new fleetmsv3<\/code> command with routing enabled.<\/p>\n<p><strong>How do I install the AdminLTE template in Angular?<\/strong><\/p>\n<p>Install AdminLTE using <code>npm install admin-lte@^3.2 --save<\/code>, then configure its CSS and JavaScript files in the Angular <code>angular.json<\/code> file.<\/p>\n<p><strong>Where do I configure AdminLTE scripts and stylesheets?<\/strong><\/p>\n<p>The AdminLTE CSS files are added to the <code>styles<\/code> section and the JavaScript files are added to the <code>scripts<\/code> section of the <code>angular.json<\/code> build configuration.<\/p>\n<p><strong>Why are AdminLTE images not displaying in Angular?<\/strong><\/p>\n<p>The AdminLTE image paths need to be updated to point to the Angular assets folder. For example, <code>dist\/img\/<\/code> should be replaced with <code>assets\/img\/<\/code> after copying the image folder into <code>src\/assets<\/code>.<\/p>\n<h3>Final Thoughts<\/h3>\n<p>FleetMSv3 brings together Angular, Node.js, PostgreSQL, and AdminLTE to create the foundation for the application&#8217;s frontend and backend development.<\/p>\n<p>After installing the required tools, configuring AdminLTE, adding its scripts and stylesheets, and updating the image paths, you should have the dashboard running successfully in Angular. The project can then be extended with authentication, state management, database integration, and other features planned for FleetMSv3.<\/p>","protected":false},"excerpt":{"rendered":"<p>Learn how to setup Angular, Node, PostgreSQL and Angular Template for FleetMSv3, including AdminLTE, scripts, stylesheets, and application configuration.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[311],"tags":[],"class_list":["post-1998","post","type-post","status-publish","format-standard","hentry","category-sql"],"acf":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1998"}],"version-history":[{"count":3,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1998\/revisions"}],"predecessor-version":[{"id":2578,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1998\/revisions\/2578"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}