feat(app): update app to Angular 18

.eslintrc.json

@@ -1,14 +1,18 @@
 {
   "root": true,
   "ignorePatterns": ["projects/**/*"],
+  "parserOptions": {
+    "project": ["tsconfig.eslint.json"],
+    "createDefaultProgram": true
+  },
+  "plugins": ["eslint-plugin-import", "@babel"],
   "overrides": [
     {
       "files": ["*.ts"],
-      "parserOptions": {
-        "project": ["tsconfig.json"],
-        "createDefaultProgram": true
-      },
+      "plugins": ["ngrx"],
       "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
         "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates",
         "plugin:ngrx/recommended"
@@ -36,20 +40,46 @@
             "alphabetize": {
               "order": "asc"
             },
-            "groups": ["builtin", "external"],
+            "pathGroupsExcludedImportTypes": ["internal"],
+            "groups": [["builtin", "external"], "internal", "type", "parent"],
             "newlines-between": "always"
           }
         ],
+        "import/first": ["error"],
+        "import/no-duplicates": ["error"],
         "@typescript-eslint/member-ordering": [
           "error",
           {
             "default": [
-              "public-decorated-field",
-              "public-instance-field",
+              "signature",
+              "public-static-field",
+              "protected-static-field",
+              "private-static-field",
+              "public-abstract-field",
+              "protected-abstract-field",
               "private-decorated-field",
               "private-instance-field",
+              "protected-decorated-field",
+              "protected-instance-field",
+              "public-decorated-field",
+              "public-instance-field",
               "public-constructor",
+              "protected-constructor",
+              "private-constructor",
+              "public-static-method",
+              "protected-static-method",
+              "private-static-method",
+              "public-abstract-get",
+              "public-abstract-set",
+              "protected-abstract-get",
+              "protected-abstract-set",
+              "public-abstract-method",
+              "protected-abstract-method",
+              "public-decorated-method",
               "public-instance-method",
+              "protected-decorated-method",
+              "protected-instance-method",
+              "private-decorated-method",
               "private-instance-method"
             ]
           }
@@ -107,7 +137,6 @@
         "key-spacing": "error",
         "array-element-newline": ["error", "consistent"],
         "no-extra-semi": "error",
-        "dot-notation": "error",
         "comma-spacing": "error",
         "prefer-const": "error",
         "eqeqeq": "error",
@@ -128,24 +157,20 @@
             "before": false
           }
         ],
-        "indent": [
-          "error",
-          2,
-          {
-            "SwitchCase": 1,
-            "ignoredNodes": ["CallExpression"]
-          }
-        ],
         "@typescript-eslint/type-annotation-spacing": "error",
-        "@babel/semi": "error"
-      },
-      "plugins": ["ngrx"]
+        "@babel/semi": "error",
+        "@typescript-eslint/no-explicit-any": "warn"
+      }
     },
     {
       "files": ["*.html"],
-      "extends": ["plugin:@angular-eslint/template/recommended"],
-      "rules": {}
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
+      ],
+      "rules": {
+        "@angular-eslint/template/prefer-self-closing-tags": ["error"]
+      }
     }
-  ],
-  "plugins": ["eslint-plugin-import", "@babel"]
+  ]
 }

.github/workflows/code-quality.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '16.x'
+          node-version: '20.x'
 
       - name: Cache node modules
         uses: actions/cache@v2
@@ -50,7 +50,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '16.x'
+          node-version: '20.x'
 
       - name: Cache node modules
         uses: actions/cache@v2

.gitignore

@@ -1,46 +1,45 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
 /bazel-out
 
-# dependencies
+# Node
 /node_modules
-
-# profiling files
-chrome-profiler-events*.json
+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
+
+# Plugins
+.eslintcache

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install commitlint --edit $1
+npx commitlint --edit $1

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install lint-staged
+npx lint-staged

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+lockfileVersion=3

.prettierignore

@@ -1,4 +1,14 @@
-package.json
-package-lock.json
+# Add files here to ignore them from prettier formatting
+
+# Default
 /dist
-/.angular
+/coverage
+/tmp
+
+# Plugins
+.angular
+.eslintcache
+
+# App
+package-lock.json
+package.json

.prettierrc

@@ -1,9 +1,11 @@
 {
-  "useTabs": false,
-  "tabWidth": 2,
+  "arrowParens": "avoid",
   "printWidth": 90,
   "semi": true,
   "singleQuote": true,
+  "tabWidth": 2,
   "trailingComma": "es5",
-  "arrowParens": "avoid"
+  "useTabs": false,
+  "htmlWhitespaceSensitivity": "ignore",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
+    "angular.ng-template",
     "esbenp.prettier-vscode",
     "PKief.material-icon-theme",
     "dbaeumer.vscode-eslint",

.vscode/settings.json

@@ -37,5 +37,13 @@
     "auth",
     "utils",
     "models"
-  ]
+  ],
+
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.expand": false,
+  "explorer.fileNesting.patterns": {
+    ".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*, .dockerignore",
+    "package.json": ".browserslist*, .codecov, .commitlint*, .editorconfig, .eslint*, .github*, .huskyrc*, .jslint*, .lintstagedrc*, .node-version, .npm*, .nvmrc, .prettier*, prettier*, .releaserc*, .vscode*, commitlint*, cypress.json, jest.*, jsconfig.*, lint-staged*, nest-cli.*, package-lock.json, stylelint*, tsdoc.*, tslint*, webpack.config.*, workspace.json, yarn*",
+    "readme.*": "authors, backers.md, changelog*, citation*, code_of_conduct.md, codeowners, contributing.md, contributors, copying, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors.md"
+  }
 }

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+All notable changes to this project will be documented in this file.
 
 ### [1.0.1](https://github.com/nikosanif/angular-authentication/compare/v1.0.0...v1.0.1) (2021-12-23)
 

README.md

@@ -2,12 +2,12 @@
 
 An Angular application that demonstrates best practices for user authentication & authorization flows.
 
-By [@nikosanif](https://twitter.com/nikosanif)
+By [@nikosanif](https://x.com/nikosanif)
 
-[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/nikosanif/angular-authentication)
 [![license](https://img.shields.io/github/license/nikosanif/angular-authentication.svg)](https://github.com/nikosanif/angular-authentication/blob/main/LICENSE)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/4c9d2c63-d481-486a-996c-8451443ac9d6/deploy-status)](https://angular-authentication.netlify.app)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-[![Twitter Follow](https://img.shields.io/twitter/follow/nikosanif.svg?style=social&label=Follow)](https://twitter.com/nikosanif)
+[![X Follow](https://img.shields.io/twitter/follow/nikosanif.svg?style=social&label=Follow)](https://x.com/nikosanif)
 
 ## Table of Contents
 
@@ -48,8 +48,7 @@ Live application: [angular-authentication.netlify.app](https://angular-authentic
 - `npm run lint` - linting source code of this project
 - `npm run format:check` - runs prettier to check for formatting errors
 - `npm run format:write` - runs prettier to format whole code base
-- `npm run release` - runs standard-version to create new release
-- `npm run analyze` - runs Webpack Bundle Analyzer to examine chunk files
+- `npm run release` - runs `release-it` to create new release
 
 ## Features
 
@@ -63,13 +62,13 @@ Live application: [angular-authentication.netlify.app](https://angular-authentic
 - Lazy loading of Angular modules
 - API requests with `@ngrx/effects`
 - Responsive design
-- In-memory Web API
+- Custom In-memory Web API using interceptors
 
 ## Tech Stack
 
 - [Angular](https://angular.io/)
 - [NgRX](https://ngrx.io/) - @ngrx/{store,effects,component}
-- [Taiga UI](https://taiga-ui.dev/)
+- [Angular Material UI](https://material.angular.io/)
 - [Tailwind CSS](https://tailwindcss.com/)
 - Other dev tools
   - ESLint
@@ -138,13 +137,13 @@ If you have found any bug in the source code or want to _request_ a new feature,
 ## Support
 
 - Star this repository 👆⭐️
-- Help it spread to a wider audience: [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/nikosanif.svg?style=social&label=Tweet)](https://twitter.com/intent/tweet?text=An%20Angular%20application%20that%20demonstrates%20best%20practices%20for%20user%20authentication%20and%20authorization%20flows.%0A%0A%40nikosanif%20%0A%F0%9F%94%97%20https%3A%2F%2Fgithub.com%2Fnikosanif%2Fangular-authentication%0A%0A&hashtags=Angular,NgRx,TaigaUI,tailwindcss,ngAuth)
+- Help it spread to a wider audience: [![X](https://img.shields.io/twitter/url/https/x.com/nikosanif.svg?style=social&label=Tweet)](https://x.com/intent/tweet?text=An%20Angular%20application%20that%20demonstrates%20best%20practices%20for%20user%20authentication%20and%20authorization%20flows.%0A%0A%40nikosanif%20%0A%F0%9F%94%97%20https%3A%2F%2Fgithub.com%2Fnikosanif%2Fangular-authentication%0A%0A&hashtags=Angular,NgRx,MDX,tailwindcss,ngAuth)
 
 ### Author: Nikos Anifantis ✍️
 
 - Fullstack Software Engineer - I’m currently working on Angular & Node.js application development.
 - I write stuff at [dev.to/nikosanif](https://dev.to/nikosanif) and [nikosanif.medium.com](https://nikosanif.medium.com/)
-- How to reach me: [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/nikosanif.svg?style=social&label=Follow%20nikosanif)](https://twitter.com/nikosanif) or [![LinkedIn](https://img.shields.io/badge/LinkedIn-blue?style=social&style=flat&logo=linkedin&labelColor=blue&label=Connect%20Nikos%20Anifantis)](https://www.linkedin.com/in/nikosanifantis/)
+- How to reach me: [![X](https://img.shields.io/twitter/url/https/x.com/nikosanif.svg?style=social&label=Follow%20nikosanif)](https://x.com/nikosanif) or [![LinkedIn](https://img.shields.io/badge/LinkedIn-blue?style=social&style=flat&logo=linkedin&labelColor=blue&label=Connect%20Nikos%20Anifantis)](https://www.linkedin.com/in/nikosanifantis/)
 
 ## License