Angular 17 upgrade

angular.json

@@ -124,7 +124,8 @@
             "main": "src/main.server.ts",
             "tsConfig": "src/tsconfig.server.json",
             "sourceMap": true,
-            "optimization": false
+            "optimization": false,
+            "buildOptimizer": false
           },
           "configurations": {
             "mock-ng-spree": {
@@ -173,30 +174,30 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angularspree:build"
+            "buildTarget": "angularspree:build"
           },
           "configurations": {
             "mock-ng-spree": {
-              "browserTarget": "angularspree:build:mock-ng-spree"
+              "buildTarget": "angularspree:build:mock-ng-spree"
             },
             "dev-ng-spree": {
-              "browserTarget": "angularspree:build:dev-ng-spree"
+              "buildTarget": "angularspree:build:dev-ng-spree"
             },
             "prod-ng-spree": {
-              "browserTarget": "angularspree:build:prod-ng-spree"
+              "buildTarget": "angularspree:build:prod-ng-spree"
             },
             "dev-custom": {
-              "browserTarget": "angularspree:build:dev-custom"
+              "buildTarget": "angularspree:build:dev-custom"
             },
             "prod-custom": {
-              "browserTarget": "angularspree:build:prod-custom"
+              "buildTarget": "angularspree:build:prod-custom"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angularspree:build"
+            "buildTarget": "angularspree:build"
           }
         },
         "test": {

package.json

@@ -4,7 +4,6 @@
   "license": "MIT",
   "scripts": {
     "ng": "./node_modules/@angular/cli/bin/ng",
-    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
     "start:mock-ng-spree": "ng serve --configuration=mock-ng-spree",
     "e2e:dev-ng-spree": "ng e2e --configuration=dev-ng-spree",
     "lint:dev-ng-spree": "ng lint --configuration=dev-ng-spree",
@@ -33,42 +32,40 @@
   "private": true,
   "dependencies": {
     "@angular-slider/ngx-slider": "^2.0.3",
-    "@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/animations": "^17.0.4",
+    "@angular/common": "^17.0.4",
+    "@angular/compiler": "^17.0.4",
+    "@angular/core": "^17.0.4",
+    "@angular/forms": "^17.0.4",
+    "@angular/platform-browser": "^17.0.4",
+    "@angular/platform-browser-dynamic": "^17.0.4",
+    "@angular/platform-server": "^17.0.4",
     "@angular/pwa": "^0.10.6",
-    "@angular/router": "^15.1.5",
-    "@angular/service-worker": "^15.1.5",
+    "@angular/router": "^17.0.4",
+    "@angular/service-worker": "^17.0.4",
+    "@angular/ssr": "^17.0.2",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^10.0.1",
     "@ngrx/entity": "^10.0.1",
     "@ngrx/store": "^10.0.1",
-    "@nguniversal/builders": "^14.0.3",
-    "@nguniversal/common": "^14.0.3",
-    "@nguniversal/express-engine": "^14.0.3",
+    "@ngu/carousel": "^3.0.1",
     "@ngx-lite/input-star-rating": "^0.3.7",
     "@ngx-lite/json-ld": "^0.6.4",
-    "ngx-progressbar": "^6.0.3",
-    "@ngu/carousel": "^3.0.1",
     "@types/crypto-js": "^3.1.40",
     "@types/express": "^4.17.9",
     "angular-svg-round-progressbar": "^5.0.2",
     "bootstrap": "4.1.3",
     "crypto-js": "^3.1.9-1",
-    "jsonapi-deserializer": "^0.1.1",
     "express": "^4.17.1",
     "fibers": "^4.0.2",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "immutable": "^4.0.0-rc.12",
-    "ng-lazyload-image": "^7.0.1",
-    "ng2-ui-auth": "^9.2.0",
+    "jsonapi-deserializer": "^0.1.1",
+    "ng-lazyload-image": "^9.1.3",
+    "ng2-ui-auth": "^10.0.1",
     "ngx-bootstrap": "^6.2.0",
+    "ngx-progressbar": "^6.0.3",
     "ngx-toastr": "^16.0.2",
     "picturefill": "^3.0.3",
     "reselect": "^4.0.0",
@@ -77,13 +74,13 @@
     "ts-loader": "^5.3.0",
     "tslib": "^2.0.0",
     "webpack-bundle-analyzer": "^3.6.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.1.6",
-    "@angular/cli": "^15.1.6",
-    "@angular/compiler-cli": "^15.1.5",
-    "@angular/language-service": "^15.1.5",
+    "@angular-devkit/build-angular": "^17.0.2",
+    "@angular/cli": "^17.0.2",
+    "@angular/compiler-cli": "^17.0.4",
+    "@angular/language-service": "^17.0.4",
     "@angularclass/hmr": "^2.1.3",
     "@compodoc/compodoc": "^1.1.6",
     "@ngrx/schematics": "^9.0.0",
@@ -109,7 +106,7 @@
     "sw-precache": "^5.2.1",
     "ts-node": "~7.0.1",
     "tslint": "~6.1.0",
-    "typescript": "4.9.5",
+    "typescript": "5.2.2",
     "webpack-cli": "^3.1.2"
   },
   "description": "Spree for Angular2",

src/app/app.module.ts

@@ -4,15 +4,14 @@ import { Ng2UiAuthModule } from 'ng2-ui-auth';
 import { EffectsModule } from '@ngrx/effects';
 import {
   BrowserModule,
-  BrowserTransferStateModule
 } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, APP_ID } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
-import { TransferHttpCacheModule } from '@nguniversal/common';
+import { TransferHttpCacheModule } from '@angular/ssr';
 
 // Components
 import { AppComponent } from './app.component';
@@ -64,8 +63,8 @@ import { AddressService } from './checkout/address/services/address.service';
     EffectsModule.forRoot([]),
 
     BrowserAnimationsModule,
-    BrowserModule.withServerTransition({ appId: 'ng-spree' }),
-    BrowserTransferStateModule,
+    BrowserModule,
+    { provide: APP_ID, useValue: 'ng-spree' },
     TransferHttpCacheModule,
     FormsModule,
     LayoutModule,

src/app/core/guards/auth.guard.ts

@@ -1,17 +1,12 @@
 import { Subscription, Observable } from 'rxjs';
 import { Injectable, OnDestroy } from '@angular/core';
-import {
-  Router,
-  CanActivate,
-  ActivatedRouteSnapshot,
-  RouterStateSnapshot
-} from '@angular/router';
+import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { AppState } from '../../interfaces';
 import { getAuthStatus } from '../../auth/reducers/selectors';
 
 @Injectable()
-export class CanActivateViaAuthGuard implements CanActivate, OnDestroy {
+export class CanActivateViaAuthGuard  implements OnDestroy {
   isAuthenticated: boolean;
   subscription: Subscription;
 

src/app/core/interceptors/universal.interceptor.ts

@@ -1,7 +1,7 @@
 import { Injectable, Inject, Optional } from '@angular/core';
 import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
 import { Request } from 'express';
-import { REQUEST } from '@nguniversal/express-engine/tokens';
+import { REQUEST } from '../../../express.tokens';
 
 @Injectable()
 export class UniversalInterceptor implements HttpInterceptor {

src/app/core/services/transfer-state.service.ts

@@ -1,5 +1,5 @@
-import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
-import { TransferState, makeStateKey } from '@angular/platform-browser';
+import { Inject, Injectable, PLATFORM_ID, makeStateKey, TransferState } from '@angular/core';
+
 import { isPlatformBrowser } from '@angular/common';
 
 /**

src/app/modules/search/guards/search-resolver.ts

@@ -5,17 +5,12 @@ import { SearchingService } from './../services/searching.service';
 import { map, filter, take } from 'rxjs/operators';
 import { Observable, of } from 'rxjs';
 import { Injectable } from '@angular/core';
-import {
-  Resolve,
-  ActivatedRouteSnapshot,
-  RouterStateSnapshot,
-  Router
-} from '@angular/router';
+import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 import { AppState } from '../../../interfaces';
 import * as fromSearch from './../store/selectors/search.selector';
 
 @Injectable()
-export class SearchResolver implements Resolve<any> {
+export class SearchResolver  {
   appliedFilters: SearchAppliedParams =
     SearchingService.DEFAULT_APPLIED_FILTERS;
 

src/app/product/guards/product-resolver.ts

@@ -3,16 +3,11 @@ import { catchError } from 'rxjs/operators';
 import { Observable, of } from 'rxjs';
 import { ProductService } from './../../core/services/product.service';
 import { Injectable } from '@angular/core';
-import {
-  Resolve,
-  ActivatedRouteSnapshot,
-  RouterStateSnapshot,
-  Router
-} from '@angular/router';
+import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 import { Product } from '../../core/models/product';
 
 @Injectable()
-export class ProductResolver implements Resolve<Product> {
+export class ProductResolver  {
   constructor(
     private productService: ProductService,
     private toastrService: ToastrService,