🚀Angular 15 upgrade 🚀 (#408)

* update node

* upgrade to ng 15

* upgrade readme

Author: pkrawat1

.tool-versions

@@ -1 +1 @@
-nodejs 16.14.2
+nodejs 18.14.1

README.md

@@ -21,9 +21,9 @@
 
 # AngularSpree
 
-**AngularSpree is an Angular(14) e-commerce application.**
+**AngularSpree is an Angular(15) e-commerce application.**
 
-It is a plug and play frontend application for [AviaCommerce API](https://www.aviacommerce.org/docs/apis-getting-started.html) built using Angular(14), Redux, Observables & ImmutableJs.
+It is a plug and play frontend application for [AviaCommerce API](https://www.aviacommerce.org/docs/apis-getting-started.html) built using Angular(15), Redux, Observables & ImmutableJs.
 
 **It is not limited to aviacommerce and can also be used with any e-commerce solution with an api interface. Such as spreecommerce, magento, opencart etc.**
 

package.json

@@ -33,17 +33,17 @@
   "private": true,
   "dependencies": {
     "@angular-slider/ngx-slider": "^2.0.3",
-    "@angular/animations": "^14.0.6",
-    "@angular/common": "^14.0.6",
-    "@angular/compiler": "^14.0.6",
-    "@angular/core": "^14.0.6",
-    "@angular/forms": "^14.0.6",
-    "@angular/platform-browser": "^14.0.6",
-    "@angular/platform-browser-dynamic": "^14.0.6",
-    "@angular/platform-server": "^14.0.6",
+    "@angular/animations": "^15.1.5",
+    "@angular/common": "^15.1.5",
+    "@angular/compiler": "^15.1.5",
+    "@angular/core": "^15.1.5",
+    "@angular/forms": "^15.1.5",
+    "@angular/platform-browser": "^15.1.5",
+    "@angular/platform-browser-dynamic": "^15.1.5",
+    "@angular/platform-server": "^15.1.5",
     "@angular/pwa": "^0.10.6",
-    "@angular/router": "^14.0.6",
-    "@angular/service-worker": "^14.0.6",
+    "@angular/router": "^15.1.5",
+    "@angular/service-worker": "^15.1.5",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^10.0.1",
     "@ngrx/entity": "^10.0.1",
@@ -69,7 +69,7 @@
     "ng-lazyload-image": "^7.0.1",
     "ng2-ui-auth": "^9.2.0",
     "ngx-bootstrap": "^6.2.0",
-    "ngx-toastr": "^11.2.0",
+    "ngx-toastr": "^16.0.2",
     "picturefill": "^3.0.3",
     "reselect": "^4.0.0",
     "rxjs": "~6.5.3",
@@ -80,10 +80,10 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.0.6",
-    "@angular/cli": "^14.0.6",
-    "@angular/compiler-cli": "^14.0.6",
-    "@angular/language-service": "^14.0.6",
+    "@angular-devkit/build-angular": "^15.1.6",
+    "@angular/cli": "^15.1.6",
+    "@angular/compiler-cli": "^15.1.5",
+    "@angular/language-service": "^15.1.5",
     "@angularclass/hmr": "^2.1.3",
     "@compodoc/compodoc": "^1.1.6",
     "@ngrx/schematics": "^9.0.0",
@@ -109,7 +109,7 @@
     "sw-precache": "^5.2.1",
     "ts-node": "~7.0.1",
     "tslint": "~6.1.0",
-    "typescript": "4.6.4",
+    "typescript": "4.9.5",
     "webpack-cli": "^3.1.2"
   },
   "description": "Spree for Angular2",

src/app/app.component.scss

@@ -8,7 +8,7 @@
 }
 
 .issearchopen :host ::ng-deep .main-body {
-  @media screen and(min-width: 320px) and(max-width: 768px) {
+  @media screen and (min-width: 320px) and (max-width: 768px) {
     margin-top: 48px;
   }
 }

src/app/app.module.ts

@@ -38,9 +38,7 @@ import { AddressService } from './checkout/address/services/address.service';
   ],
   imports: [
     RouterModule.forRoot(routes, {
-    preloadingStrategy: AppPreloadingStrategy,
-    // initialNavigation: 'enabled',
-    relativeLinkResolution: 'legacy'
+    preloadingStrategy: AppPreloadingStrategy
 }),
     StoreModule.forRoot(reducers, { metaReducers, runtimeChecks: { strictStateImmutability: true, strictActionImmutability: true } }),
 

src/app/auth/components/forget-password/forget-password.component.scss

@@ -327,7 +327,7 @@ p {
   display: flex;
   align-items: center;
   padding-left: 3rem;
-  @media screen and(min-width: 310px) and(max-width: 768px) {
+  @media screen and (min-width: 310px) and (max-width: 768px) {
     padding-left: 0rem;
   }
 }

src/app/auth/components/login/login.component.scss

@@ -321,7 +321,7 @@ p {
   display: flex;
   align-items: center;
   padding-left: 3rem;
-  @media screen and(min-width: 310px) and(max-width: 768px) {
+  @media screen and (min-width: 310px) and (max-width: 768px) {
     padding-left: 15px;
   }
 }

src/app/checkout/address/address.component.scss

@@ -7,7 +7,7 @@
     display: inline-block;
     border-right: 1px solid $gray-10;
     vertical-align: top;
-    @media screen and(min-width: 320px) and(max-width: 768px) {
+    @media screen and (min-width: 320px) and (max-width: 768px) {
       min-height: auto;
       border-right: 0 solid $gray-10;
       padding: 0;
@@ -39,7 +39,7 @@
     display: inline-block;
     vertical-align: top;
     padding-left: 35px;
-    @media screen and(min-width: 320px) and(max-width: 768px) {
+    @media screen and (min-width: 320px) and (max-width: 768px) {
       padding: 0;
     }
   }

src/app/checkout/address/delivery-address/delivery-address.component.scss

@@ -13,7 +13,7 @@
     border-radius: 4px;
     position: relative;
 
-    @media screen and(min-width: 320px) and(max-width: 768px) {
+    @media screen and (min-width: 320px) and (max-width: 768px) {
       height: auto;
       width: 100%;
       margin-right: 0px;

src/app/checkout/cart/cart.component.scss

@@ -3,7 +3,7 @@
   position: relative;
   .left {
     padding-right: 40px;
-    @media screen and(min-width: 320px) and(max-width: 768px) {
+    @media screen and (min-width: 320px) and (max-width: 768px) {
       padding: 0;
       border-radius: 0px;
     }
@@ -34,7 +34,7 @@
       background-color: $white;
       border-radius: 4px;
       box-shadow: 0px 0px 3px $gray-10;
-      @media screen and(min-width: 320px) and(max-width: 768px) {
+      @media screen and (min-width: 320px) and (max-width: 768px) {
         border-radius: 0px;
         padding: 0;
         box-shadow: none;
@@ -67,7 +67,7 @@
   .right {
     vertical-align: top;
     position: absolute;
-    @media screen and(min-width: 320px) and(max-width: 768px) {
+    @media screen and (min-width: 320px) and (max-width: 768px) {
       position: relative;
       box-shadow: none;
       padding: 0 15px;