Feat(Angular-universal-ssr) upgrade to ang15 (#2775)

* update readme

* Feat(Angular-universal-ssr): upgrade to 15

* fix client lazy components creation.

* fix test run

Author: belinef

angular-universal-ssr/README.md

@@ -9,12 +9,12 @@ Run `yarn start`. This will build and serve both `client-app`, `host-app`, on
 ports `4000`, `5000`, respectively.
 
 - [localhost:4000](http://localhost:4000/) (CLIENT_APP)
-- [localhost:5000](http://localhost:5000/) (HOST_APP)
+- [localhost:3000](http://localhost:3000/) (HOST_APP)
 
 # Running Cypress E2E Tests
 
 To run tests in interactive mode, run  `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress/README.md#how-to-run-tests)
 
 To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
 
-["Best Practices, Rules amd more interesting information here](../../cypress/README.md)
+["Best Practices, Rules amd more interesting information here](../../cypress/README.md)

angular-universal-ssr/client-app/.gitignore

@@ -32,6 +32,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

angular-universal-ssr/client-app/angular.json

@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "yarn"
+    "packageManager": "yarn",
+    "analytics": "e9693d44-eea8-4fdb-918a-9139355769eb"
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -28,7 +29,6 @@
           "skipTests": true
         },
         "@schematics/angular:module": {
-          "skipTests": true
         },
         "@schematics/angular:pipe": {
           "skipTests": true
@@ -49,10 +49,20 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
-            "scripts": []
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -65,7 +75,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -83,7 +92,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -104,6 +114,5 @@
         }
       }
     }
-  },
-  "defaultProject": "client-app"
+  }
 }

angular-universal-ssr/client-app/package.json

@@ -2,45 +2,46 @@
   "name": "angular-universal-ssr_client-app",
   "version": "0.0.0",
   "scripts": {
+    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "serve:federation": "serve dist -l 5000 -s",
+    "serve:federation": "serve dist -l 3000 -s",
     "build:federation": "webpack",
     "clean": "rm -rf dist"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.2.0",
-    "@angular/common": "~10.2.0",
-    "@angular/compiler": "~10.2.0",
-    "@angular/core": "~10.2.0",
-    "@angular/forms": "~10.2.0",
-    "@angular/platform-browser": "~10.2.0",
-    "@angular/platform-browser-dynamic": "~10.2.0",
-    "@angular/router": "~10.2.0",
-    "rxjs": "~6.6.0",
-    "serve": "^13.0.0",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.11.0"
+    "@angular/animations": "^15.1.2",
+    "@angular/common": "^15.1.2",
+    "@angular/compiler": "^15.1.2",
+    "@angular/core": "^15.1.2",
+    "@angular/forms": "^15.1.2",
+    "@angular/platform-browser": "^15.1.2",
+    "@angular/platform-browser-dynamic": "^15.1.2",
+    "@angular/router": "^15.1.2",
+    "rxjs": "^7.8.0",
+    "serve": "^14.2.0",
+    "tslib": "^2.5.0",
+    "zone.js": "~0.12.0"
   },
   "devDependencies": {
-    "@ngtools/webpack": "file:../patched_packages/_ngtools_webpack.tgz",
-    "@angular-devkit/build-angular": "0.1102.19",
-    "@angular/cli": "10.2.4",
-    "@angular/compiler-cli": "10.2.5",
-    "@types/node": "12.20.55",
+    "@ngtools/webpack": "15.1.4",
+    "@angular-devkit/build-angular": "15.1.4",
+    "@angular/cli": "15.1.4",
+    "@angular/compiler-cli": "15.1.2",
+    "@types/node": "18.11.9",
     "clean-webpack-plugin": "4.0.0",
     "html-webpack-plugin": "5.5.0",
     "raw-loader": "4.0.2",
-    "sass-loader": "12.6.0",
-    "ts-node": "9.1.1",
-    "tslint": "6.1.3",
-    "typescript": "4.0.8",
-    "webpack": "5.72.1",
-    "webpack-cli": "4.10.0"
+    "sass-loader": "13.2.0",
+    "ts-node": "10.9.1",
+    "tslint": "^6.1.3",
+    "typescript": "4.9.5",
+    "webpack": "5.75.0",
+    "webpack-cli": "5.0.1"
   }
 }

angular-universal-ssr/client-app/src/app/app-routing.module.ts

@@ -11,7 +11,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {})],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

angular-universal-ssr/client-app/src/app/client-cities/client-cities-home/client-cities-home.component.ts

@@ -36,8 +36,9 @@ export class ClientCitiesHomeComponent implements OnInit {
       );
       const componentInstance = this.viewContainer.createComponent(
         factory,
-        null,
+        0,
         this.injector,
+        null,
       ).instance;
       (componentInstance as any).city = city;
     });

angular-universal-ssr/client-app/src/app/client-cities/client-cities.module.ts

@@ -5,9 +5,8 @@ import { ClientCitiesRoutingModule } from './client-cities-routing.module';
 import { ClientCityComponent } from './client-city/client-city.component';
 
 @NgModule({
-  declarations: [ClientCitiesHomeComponent, ClientCityComponent],
-  imports: [CommonModule, ClientCitiesRoutingModule],
-  exports: [ClientCitiesHomeComponent],
-  entryComponents: [ClientCityComponent],
+    declarations: [ClientCitiesHomeComponent, ClientCityComponent],
+    imports: [CommonModule, ClientCitiesRoutingModule],
+    exports: [ClientCitiesHomeComponent]
 })
 export class ClientCitiesModule {}

angular-universal-ssr/client-app/src/environments/environment.ts

@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

angular-universal-ssr/client-app/src/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -55,7 +45,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

angular-universal-ssr/client-app/src/test.ts

@@ -5,7 +5,7 @@ import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 
 declare const require: {
   context(