Feat(Angular-universal-ssr) upgrade to ang15

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(

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

@@ -1,9 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": ["src/main.ts", "src/polyfills.ts"],
-  "include": ["src/**/*.d.ts"]
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
 }

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

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
@@ -7,14 +8,13 @@
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",
-    "lib": ["es2018", "dom"]
-  },
-  "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ]
   }
 }

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

@@ -1,14 +1,29 @@
-/*
-  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
-  It is not intended to be used to perform a compilation.
-
-  To learn more about this file see: https://angular.io/config/solution-tsconfig.
-*/
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    }
-  ]
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": false,
+    "strictPropertyInitialization": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictTemplates": true
+  }
 }

angular-universal-ssr/client-app/webpack/client-app.js

@@ -1,5 +1,5 @@
 const { resolve } = require('path');
-const { AngularCompilerPlugin } = require('@ngtools/webpack');
+const { AngularWebpackPlugin } = require('@ngtools/webpack');
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
@@ -10,8 +10,12 @@ module.exports = (env = {}) => {
   return {
     entry: ['./src/polyfills.ts', './src/main.ts'],
     mode: 'production',
+    resolve: {
+      mainFields: ['browser', 'module', 'main'],
+      extensions: ['.ts', '.js'],
+    },
     output: {
-      publicPath: 'http://localhost:5000/',
+      publicPath: 'http://localhost:3000/',
       path: resolve(__dirname, buildFolder),
     },
     plugins: [
@@ -34,9 +38,10 @@ module.exports = (env = {}) => {
         ],
       }),
 
-      new AngularCompilerPlugin({
+      new AngularWebpackPlugin({
         tsConfigPath: './tsconfig.app.json',
         entryModule: './src/app/app.module#AppModule',
+        jitMode: true,
         skipCodeGeneration: true,
         directTemplateLoading: false,
       }),
@@ -45,7 +50,7 @@ module.exports = (env = {}) => {
       static: {
         directory: buildFolder,
       },
-      port: 5000,
+      port: 3000,
     },
     module: {
       rules: [...require('./_loaders')],

angular-universal-ssr/client-app/webpack/client-ssr.js

@@ -1,4 +1,4 @@
-const { AngularCompilerPlugin, PLATFORM } = require('@ngtools/webpack');
+const { AngularWebpackPlugin } = require('@ngtools/webpack');
 const { resolve } = require('path');
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
@@ -11,6 +11,7 @@ module.exports = (env = {}) => {
     mode: 'production',
     resolve: {
       mainFields: ['browser', 'module', 'main'],
+      extensions: ['.ts', '.js'],
     },
     output: {
       filename: '[name].js',
@@ -35,9 +36,11 @@ module.exports = (env = {}) => {
           { '@angular/router': { singleton: true, eager: true } },
         ],
       }),
-      new AngularCompilerPlugin({
+      new AngularWebpackPlugin({
         entryModule: resolve(__dirname, '../src/app/app.module#AppModule'),
         tsConfigPath: './tsconfig.app.json',
+        platform: 1,
+        jitMode: true,
         skipCodeGeneration: true,
         directTemplateLoading: false,
       }),