Update Angular 14.2.2 & UI bootstrap 5.2.1 & React dependencies

Author: ganatan

README.md

@@ -12,7 +12,7 @@ it's part of a repo series designed
 
 to create a **Web Application with Angular 14**
 
-* Featuring [**Angular 14.0.4**](https://github.com/angular/angular/releases) & [**Angular CLI 14.0.4**](https://github.com/angular/angular-cli/releases/)
+* Featuring [**Angular 14.2.2**](https://github.com/angular/angular/releases) & [**Angular CLI 14.2.2**](https://github.com/angular/angular-cli/releases/)
 
 
 * See the [**Live demo**](#angular-live-demo), Test the repo with [**Quick start**](#angular-quick-start) and for more information Read the step by step [**Tutorial**](#angular-tutorial) or read the [**Getting started**](#angular-getting-started)

angular/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-seo",
-  "version": "14.1.1",
+  "version": "14.2.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port 4200",
@@ -13,39 +13,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "14.1.1",
-    "@angular/common": "14.1.1",
-    "@angular/compiler": "14.1.1",
-    "@angular/core": "14.1.1",
-    "@angular/forms": "14.1.1",
-    "@angular/platform-browser": "14.1.1",
-    "@angular/platform-browser-dynamic": "14.1.1",
-    "@angular/router": "14.1.1",
-    "@fortawesome/fontawesome-free": "6.1.2",
-    "bootstrap": "5.2.0",
+    "@angular/animations": "14.2.2",
+    "@angular/common": "14.2.2",
+    "@angular/compiler": "14.2.2",
+    "@angular/core": "14.2.2",
+    "@angular/forms": "14.2.2",
+    "@angular/platform-browser": "14.2.2",
+    "@angular/platform-browser-dynamic": "14.2.2",
+    "@angular/router": "14.2.2",
+    "@fortawesome/fontawesome-free": "6.2.0",
+    "bootstrap": "5.2.1",
     "rxjs": "7.5.6",
     "tslib": "2.4.0",
-    "zone.js": "0.11.7"
+    "zone.js": "0.11.8"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "14.1.1",
-    "@angular-eslint/builder": "14.0.2",
-    "@angular-eslint/eslint-plugin": "14.0.2",
-    "@angular-eslint/eslint-plugin-template": "14.0.2",
-    "@angular-eslint/schematics": "14.0.2",
-    "@angular-eslint/template-parser": "14.0.2",
-    "@angular/cli": "14.1.1",
-    "@angular/compiler-cli": "14.1.1",
-    "@types/jasmine": "4.0.3",
-    "@typescript-eslint/eslint-plugin": "5.32.0",
-    "@typescript-eslint/parser": "5.32.0",
-    "eslint": "8.21.0",
-    "jasmine-core": "4.3.0",
+    "@angular-devkit/build-angular": "14.2.3",
+    "@angular-eslint/builder": "14.0.4",
+    "@angular-eslint/eslint-plugin": "14.0.4",
+    "@angular-eslint/eslint-plugin-template": "14.0.4",
+    "@angular-eslint/schematics": "14.0.4",
+    "@angular-eslint/template-parser": "14.0.4",
+    "@angular/cli": "14.2.3",
+    "@angular/compiler-cli": "14.2.2",
+    "@types/jasmine": "4.3.0",
+    "@typescript-eslint/eslint-plugin": "5.37.0",
+    "@typescript-eslint/parser": "5.37.0",
+    "eslint": "8.23.1",
+    "jasmine-core": "4.4.0",
     "karma": "6.4.0",
     "karma-chrome-launcher": "3.1.1",
     "karma-coverage": "2.2.0",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
-    "typescript": "4.7.4"
+    "typescript": "4.8.3"
   }
 }

angular/package.json

@@ -3,8 +3,8 @@ export const environment = {
   application:
   {
     name: 'angular-seo',
-    version: 'Angular 14.0.4',
-    bootstrap: 'Bootstrap 5.1.3',
-    fontawesome: 'Font Awesome 6.1.1',
+    version: 'Angular 14.2.2',
+    bootstrap: 'Bootstrap 5.2.1',
+    fontawesome: 'Font Awesome 6.2.0',
   }
 };

angular/src/environments/environment.prod.ts

@@ -3,8 +3,8 @@ export const environment = {
   application:
   {
     name: 'angular-seo',
-    version: 'Angular 14.0.4',
-    bootstrap: 'Bootstrap 5.1.3',
-    fontawesome: 'Font Awesome 6.1.1',
+    version: 'Angular 14.2.2',
+    bootstrap: 'Bootstrap 5.2.1',
+    fontawesome: 'Font Awesome 6.2.0',
   }
 };

angular/src/environments/environment.ts

@@ -45,18 +45,6 @@
     .nga-logo:hover {
       color: rgba(255, 255, 255, 0.75);
     }
-
-    .nga-btn-navbar {
-      color: #fff;
-      background-color: #1976d2;
-      border-color: #0d6efd;
-    }
-
-    .nga-btn-navbar:hover {
-      color: white;
-      background-color: #0b5ed7;
-      border-color: #0a58ca;
-    }
   </style>
 
   <!-- FOOTER -->
@@ -86,7 +74,6 @@
     }
   </style>
 
-
   <!-- HOME -->
   <style>
     .nga-card {
@@ -99,8 +86,43 @@
     }
 
     .nga-card:hover {
+      transform: translateY(-3px);
       box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
     }
+
+    .nga-card a {
+      color: #0d6efd;
+      text-decoration: none;
+    }
+
+    .nga-card a:hover {
+      color: #0d6efd;
+      text-decoration: none;
+    }
+
+    /*    .nga-card-step {
+      box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 3px 3px rgba(0, 0, 0, .09);
+      margin: 4px;
+      cursor: pointer;
+      text-decoration: none;
+    }
+
+    .nga-card-step:hover {
+      box-shadow: 0 4px 4px rgba(0, 0, 0, .09), 0 4px 4px rgba(0, 0, 0, .13);
+      border-radius: 5px;
+      color: #0d6efd;
+
+    }
+
+    .nga-card-step a {
+      color: black;
+      text-decoration: none;
+    }
+
+    .nga-card-step a:hover {
+      color: #0d6efd;
+      text-decoration: none;
+    } */
   </style>
 
 </head>
@@ -109,9 +131,9 @@
 
   <header class="navbar navbar-expand-md navbar-dark fixed-top nga-navbar">
     <nav class="container" aria-label="Main navigation">
-      <a href="" class="navbar-brand" alt="Accueil" aria-label="Ganatan">
+      <a href="home" class="navbar-brand" alt="Accueil" aria-label="Ganatan">
         <img src="./assets/params/images/logo/ganatan-logo.png" srcset="./assets/params/images/logo/ganatan-logo.png,
-        ./assets/params/images/logo/ganatan-logo@2x.png 2x" width="25" height="25" alt="Ganatan Logo">
+        ./assets/params/images/logo/ganatan-logo@2x.png 2x" width="25" height="25" alt="Ganatan Logo" />
         <span class="nga-logo mx-1">ganatan</span>
       </a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
@@ -121,24 +143,24 @@
       <div class="collapse navbar-collapse" id="navbarCollapse">
         <ul class="navbar-nav mx-auto">
           <li class="nav-item">
-            <a class="nav-link" aria-current="page" href="">
+            <a class="nav-link" aria-current="page" href="/">
               <i class="fas fa-home me-1"></i>Home</a>
           </li>
         </ul>
         <ul class="navbar-nav me-auto">
           <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="">
+            <a class="nav-link active" aria-current="page" href="about">
               <i class="far fa-question-circle me-1"></i>About</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" aria-current="page" href="">
+            <a class="nav-link" aria-current="page" href="contact">
               <i class="fas fa-envelope me-1"></i>Contact</a>
           </li>
         </ul>
         <form class="d-flex">
-          <button type="button" class="btn btn-sm nga-btn-navbar me-2"><i class="fas fa-user-plus me-2"></i>Sign
-            up</button>
-          <button type="button" class="btn btn-sm btn-outline-light me-2"><i
+          <button type="button" class="btn btn-sm btn btn-primary me-2" routerLink="/signup"><i
+              class="fas fa-user-plus me-2"></i>Sign up</button>
+          <button type="button" class="btn btn-sm btn-outline-light me-2" routerLink="/login"><i
               class="fas fa-sign-in-alt me-2"></i>Login</button>
         </form>
       </div>
@@ -158,17 +180,17 @@ <h1 class="h5">
         </div>
         <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3 text-center text-danger mb-2">
           <h2 class="h5">
-            Angular 14.0.1<i class="fab fa-angular fa-lg ms-2"></i>
+            Angular 14.2.2<i class="fab fa-angular fa-lg ms-2"></i>
           </h2>
         </div>
         <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3 text-center text-primary mb-2">
           <h2 class="h5">
-            Bootstrap 5.1.3<i class="fab fa-bootstrap fa-lg ms-2"></i>
+            Bootstrap 5.2.1<i class="fab fa-bootstrap fa-lg ms-2"></i>
           </h2>
         </div>
         <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3 text-center text-success mb-2">
           <h2 class="h5">
-            Font Awesome 6.1.1<i class="fab fa-font-awesome-flag fa-lg ms-2"></i>
+            Font Awesome 6.2.0<i class="fab fa-font-awesome-flag fa-lg ms-2"></i>
           </h2>
         </div>
       </div>
@@ -180,12 +202,12 @@ <h3 class="h5">Features<i class="fas fa-list ms-2"></i></h3>
       </div>
       <div class="row pt-2">
         <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
-          <div class="nga-card bg-light mb-3">
-            <a routerLink="/bootstrap">
+          <div class="card nga-card bg-light mb-3">
+            <a href="/bootstrap">
               <div class="card-header">
                 <div class="row">
                   <div class="col-10 col-xl-10">
-                    <h5 class="card-title">Bootstrap</h5>
+                    <h4 class="card-title h5">Bootstrap</h4>
                   </div>
                   <div class="col-2 col-xl-2">
                     <i class="fab fa-bootstrap fa-lg text-primary"></i>
@@ -199,11 +221,11 @@ <h5 class="card-title">Bootstrap</h5>
           </div>
         </div>
         <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
-          <div class="nga-card bg-light mb-3">
+          <div class="card nga-card bg-light mb-3">
             <div class="card-header">
               <div class="row">
                 <div class="col-10 col-xl-10">
-                  <h5 class="card-title">Services</h5>
+                  <h4 class="card-title h5">Services</h4>
                 </div>
                 <div class="col-2 col-xl-2">
                   <i class="fas fa-handshake fa-lg text-primary"></i>
@@ -216,11 +238,11 @@ <h5 class="card-title">Services</h5>
           </div>
         </div>
         <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
-          <div class="nga-card bg-light mb-3">
+          <div class="card nga-card bg-light mb-3">
             <div class="card-header">
               <div class="row">
                 <div class="col-10 col-xl-10">
-                  <h5 class="card-title">Components</h5>
+                  <h4 class="card-title h5">Components</h4>
                 </div>
                 <div class="col-2 col-xl-2">
                   <i class="far fa-clone  fa-lg text-primary"></i>
@@ -233,11 +255,11 @@ <h5 class="card-title">Components</h5>
           </div>
         </div>
         <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
-          <div class="nga-card bg-light mb-3">
+          <div class="card nga-card bg-light mb-3">
             <div class="card-header">
               <div class="row">
                 <div class="col-10 col-xl-10">
-                  <h5 class="card-title">Reactive Forms</h5>
+                  <h4 class="card-title h5">Reactive Forms</h4>
                 </div>
                 <div class="col-2 col-xl-2">
                   <i class="far fa-file-alt fa-lg text-primary"></i>
@@ -250,11 +272,11 @@ <h5 class="card-title">Reactive Forms</h5>
           </div>
         </div>
         <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
-          <div class="nga-card bg-light mb-3">
+          <div class="card nga-card bg-light mb-3">
             <div class="card-header">
               <div class="row">
                 <div class="col-10 col-xl-10">
-                  <h5 class="card-title">Template Driven Forms</h5>
+                  <h4 class="card-title h5">Template Driven Forms</h4>
                 </div>
                 <div class="col-2 col-xl-2">
                   <i class="far fa-file-alt fa-lg text-primary"></i>
@@ -274,7 +296,7 @@ <h5 class="card-title">Template Driven Forms</h5>
   <footer class="nga-footer">
     <div class="py-3 text-center" style="background-color: black;">
       <div class="container">
-        <a href="https://www.ganatan.com/"> www.ganatan.com</a>
+        2021 :<a href="https://www.ganatan.com/"> www.ganatan.com</a>
       </div>
     </div>
   </footer>