Angular version update to 18 (#89)

* First check in with angular 18

* Update documents and angular version

README.md

@@ -41,7 +41,7 @@ The apps written in the following JavaScript frameworks/libraries:
 This application features user registration, login, and a full CRUD (Create, Read, Update, Delete) example with Angular Routing and REST API samples using Express.js. REST services are secured using JWT (JSON Web Tokens).
 
 ### Technologies Used
-#### Angular (17.0.3)
+#### Angular (18.1.0)
 The frontend of this project is built with Angular, which is represented by the "A" in MEAN stack. To enable Server Side Rendering (SSR), we opted to use the Node.js Alpine image instead of a lightweight Docker image like Nginx to run the Angular application.
 
 The project includes sample code for various functionalities, such as 

frontend/.editorconfig

@@ -9,7 +9,7 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 
 [*.ts]
-quote_type = double
+quote_type = single
 
 [*.md]
 max_line_length = off

frontend/.gitignore

@@ -1,47 +1,42 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
 /bazel-out
-*/cache/
-# dependencies
-/node_modules
 
-# profiling files
-chrome-profiler-events*.json
-speed-measure-plugin*.json
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
 
-# misc
+# Miscellaneous
 /.angular/cache
-/.sass-cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
-yarn-error.log
 testem.log
 /typings
 
-# System Files
+# System files
 .DS_Store
 Thumbs.db

frontend/.prettierrc

@@ -1,8 +1,11 @@
 {
-  "useTabs": false,
-  "printWidth": 140,
-  "tabWidth": 2,
-  "singleQuote": false,
-  "trailingComma": "none",
-  "semi": true
+  "printWidth": 80,
+  "semi": true,
+  "bracketSameLine": false,
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
 }

frontend/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

frontend/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

frontend/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

frontend/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

frontend/Dockerfile

@@ -4,11 +4,9 @@ FROM node:21-alpine as builder
 # Copy dependency definitions
 COPY package.json package-lock.json ./
 
-RUN npm install -g npm@9.1.2
-
 ## installing and Storing node modules on a separate layer will prevent unnecessary npm installs at each build
 ## --legacy-peer-deps as ngx-bootstrap still depends on Angular 14
-RUN npm i --legacy-peer-deps && mkdir /app && mv ./node_modules ./app
+RUN npm i && mkdir /app && mv ./node_modules ./app
 
 # Change directory so that our commands run inside this new directory
 WORKDIR /app
@@ -17,7 +15,7 @@ WORKDIR /app
 COPY . /app/
 
 # Build server side bundles
-RUN npm run build:ssr
+RUN npm run build
 
 FROM node:21-alpine
 ## From 'builder' copy published folder
@@ -29,4 +27,4 @@ EXPOSE 4000
 
 USER node
 
-CMD ["node", "dist/frontend/server/main.js"]
+CMD ["node", "dist/contacts/server/server.mjs"]

frontend/README.md

@@ -1,6 +1,6 @@
 # Frontend (Angular)
 
-Frontend for application using Angular (updated to 17.0.3)
+Frontend for application using Angular (updated to 18.1.0)
 
 ## Development server
 
@@ -35,9 +35,8 @@ Describes which version .
 
 | Name       | Version  |
 | ---------- | -------- |
-| bootstrap     | v4.5.3    |
-| ngx-bootstrap | v9.0.0 |
-| @swimlane/ngx-datatable | v20.0.0 |
+| bootstrap     | v5.3.2    |
+| @ng-bootstrap | v17.0.0 |
 
 
 ### Dockerfile Production