feat(angular): angular 9 support (#19515)

* init ivy support * chore(): angular prerelease * chore: update * updates * angular 8 deps * chore(angular): update sync script * updates * chore(): remove console log * chore(): updates * chore(): update release script * fix(): remove comments * fix(): remove test version * fix(): failing angular test * fix(): failing angular tests * fix(): update ci steps * fix(): fix sync script * chore(): refactor angular proxies * chore(): updates * chore(): updates * chore(): lint * chore(): updates * chore(ssr): check for window * chore(): fix virtual scroll angular tests * chore(): lint * chore(): add server to link * chore(scripts): update release script * chore(): bump version check * style(scripts): spacing
2025-08-15 17:42:15 +08:00 · 2019-12-18 18:43:59 -05:00
parent 49c394c3d3
commit 2344d0b272
35 changed files with 501 additions and 359 deletions
--- a/angular/test/test-app/angular.json
+++ b/angular/test/test-app/angular.json
@ -13,11 +13,13 @@
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
-            "outputPath": "dist/browser",
+            "aot": true,
+            "outputPath": "dist/test-app/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
+            "buildOptimizer": true,
            "assets": [
              "src/favicon.ico",
              {
@ -57,6 +59,10 @@
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
                }
              ]
            }
@ -116,20 +122,44 @@
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
-            "outputPath": "dist/server",
-            "main": "src/main.server.ts",
+            "outputPath": "dist/test-app/server",
+            "main": "server.ts",
            "tsConfig": "tsconfig.server.json"
          },
          "configurations": {
            "production": {
+              "outputHashing": "media",
              "fileReplacements": [
                {
-                  "src": "src/environments/environment.ts",
-                  "replaceWith": "src/environments/environment.prod.ts"
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
                }
-              ]
+              ],
+              "sourceMap": false,
+              "optimization": true
            }
          }
+        },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "options": {
+            "browserTarget": "test-app:build",
+            "serverTarget": "test-app:server"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "test-app:build:production",
+              "serverTarget": "test-app:server:production"
+            }
+          }
+        },
+        "prerender": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "browserTarget": "test-app:build:production",
+            "serverTarget": "test-app:server:production",
+            "routes": []
+          }
        }
      }
    }
--- a/angular/test/test-app/e2e/protractor.conf.js
+++ b/angular/test/test-app/e2e/protractor.conf.js
@ -1,4 +1,4 @@
-  // @ts-check
+// @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts

@ -23,7 +23,7 @@ exports.config = {
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
-    defaultTimeoutInterval: 70000,
+    defaultTimeoutInterval: 100000,
    print: function() {}
  },
  onPrepare() {
--- a/angular/test/test-app/karma.conf.js
+++ b/angular/test/test-app/karma.conf.js
@ -8,6 +8,8 @@ module.exports = function (config) {
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
@ -24,6 +26,7 @@ module.exports = function (config) {
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
-    singleRun: false
+    singleRun: false,
+    restartOnFileChange: true
  });
-};
+};
--- a/angular/test/test-app/package.json
+++ b/angular/test/test-app/package.json
@ -11,50 +11,53 @@
    "test": "ng e2e --prod",
    "test.dev": "npm run sync && ng e2e",
    "lint": "ng lint",
-    "postinstall": "npm run sync",
-    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
-    "serve:ssr": "node dist/server",
-    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
-    "build:client-and-server-bundles": "npm run build && ng run test-app:server:production --bundleDependencies all"
+    "postinstall": "npm run sync && ngcc",
+    "serve:ssr": "node dist/test-app/server/main.js",
+    "build:ssr": "ng build --prod && ng run test-app:server:production",
+    "dev:ssr": "ng run test-app:serve-ssr",
+    "prerender": "ng run test-app:prerender"
  },
  "dependencies": {
-    "@angular/animations": "^8.2.8",
-    "@angular/common": "^8.2.8",
-    "@angular/compiler": "^8.2.8",
-    "@angular/core": "^8.2.8",
-    "@angular/forms": "^8.2.8",
-    "@angular/platform-browser": "^8.2.8",
-    "@angular/platform-browser-dynamic": "^8.2.8",
-    "@angular/platform-server": "^8.2.8",
-    "@angular/router": "^8.2.8",
+    "@angular/animations": "^9.0.0-rc.2",
+    "@angular/common": "^9.0.0-rc.2",
+    "@angular/compiler": "^9.0.0-rc.2",
+    "@angular/core": "^9.0.0-rc.2",
+    "@angular/forms": "^9.0.0-rc.2",
+    "@angular/platform-browser": "^9.0.0-rc.2",
+    "@angular/platform-browser-dynamic": "^9.0.0-rc.2",
+    "@angular/platform-server": "^9.0.0-rc.2",
+    "@angular/router": "^9.0.0-rc.2",
    "@ionic/angular": "^4.7.0",
    "@ionic/angular-server": "^0.0.2",
-    "@nguniversal/express-engine": "~8.1.1",
-    "@nguniversal/module-map-ngfactory-loader": "~8.1.1",
+    "@nguniversal/express-engine": "9.0.0-next.9",
    "core-js": "^2.6.2",
    "express": "^4.15.2",
    "rxjs": "^6.5.3",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.9.1"
+    "tslib": "^1.10.0",
+    "zone.js": "~0.10.2"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.6",
-    "@angular/cli": "^8.3.6",
-    "@angular/compiler-cli": "^8.2.8",
-    "@angular/language-service": "^8.2.8",
+    "@angular-devkit/build-angular": "~0.900.0-rc.2",
+    "@angular/cli": "^9.0.0-rc.2",
+    "@angular/compiler-cli": "^9.0.0-rc.2",
+    "@angular/language-service": "^9.0.0-rc.2",
+    "@nguniversal/builders": "^9.0.0-next.9",
+    "@types/express": "^4.17.0",
    "@types/jasmine": "3.4.1",
-    "@types/node": "12.7.8",
+    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
-    "jasmine-core": "3.5.0",
-    "jasmine-spec-reporter": "4.2.1",
-    "karma": "4.3.0",
-    "karma-chrome-launcher": "3.1.0",
-    "karma-jasmine": "2.0.1",
-    "protractor": "5.4.2",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.2",
+    "protractor": "~5.4.2",
    "ts-loader": "^6.1.2",
    "ts-node": "8.4.1",
    "tslint": "~5.18.0",
-    "typescript": "~3.5.3",
+    "typescript": "~3.6.4",
    "webpack-cli": "^3.3.9"
  }
 }
--- a/angular/test/test-app/scripts/sync.sh
+++ b/angular/test/test-app/scripts/sync.sh
@ -1,15 +1,10 @@
 # Copy angular dist
 rm -rf node_modules/@ionic/angular
-mkdir node_modules/@ionic/angular
-cp -a ../../dist node_modules/@ionic/angular/dist
-cp -a ../../css node_modules/@ionic/angular/css
-cp -a ../../package.json node_modules/@ionic/angular/package.json
+cp -a ../../dist node_modules/@ionic/angular

 # Copy angular server
 rm -rf node_modules/@ionic/angular-server
-mkdir node_modules/@ionic/angular-server
-cp -a ../../../packages/angular-server/dist node_modules/@ionic/angular-server/dist
-cp -a ../../../packages/angular-server/package.json node_modules/@ionic/angular-server/package.json
+cp -a ../../../packages/angular-server/dist node_modules/@ionic/angular-server

 # # Copy core dist
 rm -rf node_modules/@ionic/core
--- a/angular/test/test-app/server.ts
+++ b/angular/test/test-app/server.ts
@ -1,58 +1,57 @@
-/**
- * *** NOTE ON IMPORTING FROM ANGULAR AND NGUNIVERSAL IN THIS FILE ***
- *
- * If your application uses third-party dependencies, you'll need to
- * either use Webpack or the Angular CLI's `bundleDependencies` feature
- * in order to adequately package them for use on the server without a
- * node_modules directory.
- *
- * However, due to the nature of the CLI's `bundleDependencies`, importing
- * Angular in this file will create a different instance of Angular than
- * the version in the compiled application code. This leads to unavoidable
- * conflicts. Therefore, please do not explicitly import from @angular or
- * @nguniversal in this file. You can export any needed resources
- * from your application's main.server.ts file, as seen below with the
- * import for `ngExpressEngine`.
- */
-
 import 'zone.js/dist/zone-node';

+import { ngExpressEngine } from '@nguniversal/express-engine';
 import * as express from 'express';
-import {join} from 'path';
+import { join } from 'path';

-// Express server
-const app = express();
+import { AppServerModule } from './src/main.server';
+import { APP_BASE_HREF } from '@angular/common';

-const PORT = process.env.PORT || 4000;
-const DIST_FOLDER = join(process.cwd(), 'dist/browser');
+// The Express app is exported so that it can be used by serverless Functions.
+export function app() {
+  const server = express();
+  const distFolder = join(process.cwd(), 'dist/test-app/browser');

-// * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule,
+  }));

-// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-app.engine('html', ngExpressEngine({
-  bootstrap: AppServerModuleNgFactory,
-  providers: [
-    provideModuleMap(LAZY_MODULE_MAP)
-  ]
-}));
+  server.set('view engine', 'html');
+  server.set('views', distFolder);

-app.set('view engine', 'html');
-app.set('views', DIST_FOLDER);
+  // Example Express Rest API endpoints
+  // app.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));

-// Example Express Rest API endpoints
-// app.get('/api/**', (req, res) => { });
-// Serve static files from /browser
-app.get('*.*', express.static(DIST_FOLDER, {
-  maxAge: '1y'
-}));
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+  });

-// All regular routes use the Universal engine
-app.get('*', (req, res) => {
-  res.render('index', { req });
-});
+  return server;
+}

-// Start up the Node server
-app.listen(PORT, () => {
-  console.log(`Node Express server listening on http://localhost:${PORT}`);
-});
+function run() {
+  const port = process.env.PORT || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+if (mainModule && mainModule.filename === __filename) {
+  run();
+}
+
+export * from './src/main.server';
--- a/angular/test/test-app/src/app/app.server.module.ts
+++ b/angular/test/test-app/src/app/app.server.module.ts
@ -1,17 +1,13 @@
 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
-
 import { IonicServerModule } from '@ionic/angular-server';
-
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
-import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
-    ModuleMapLoaderModule,
    IonicServerModule
  ],
  bootstrap: [AppComponent],
--- a/angular/test/test-app/src/main.server.ts
+++ b/angular/test/test-app/src/main.server.ts
@ -7,5 +7,4 @@ if (environment.production) {
 }

 export { AppServerModule } from './app/app.server.module';
-export { ngExpressEngine } from '@nguniversal/express-engine';
-export { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
+export { renderModule, renderModuleFactory } from '@angular/platform-server';
--- a/angular/test/test-app/src/main.ts
+++ b/angular/test/test-app/src/main.ts
@ -10,6 +10,6 @@ if (environment.production) {

 document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic()
-    .bootstrapModule(AppModule)
-    .catch(err => console.error(err));
+  .bootstrapModule(AppModule)
+  .catch(err => console.error(err));
 });
--- a/angular/test/test-app/src/polyfills.ts
+++ b/angular/test/test-app/src/polyfills.ts
@ -43,7 +43,7 @@
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
@ -52,9 +52,12 @@
 *
 */

+import './zone-flags.ts';
+
 /***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
+
 import 'zone.js/dist/zone';  // Included with Angular CLI.


--- a/angular/test/test-app/src/zone-flags.ts
+++ b/angular/test/test-app/src/zone-flags.ts
@ -0,0 +1,5 @@
+/**
+ * Prevents Angular change detection from
+ * running with certain Web Component callbacks
+ */
+(window as any).__Zone_disable_customElements = true;
--- a/angular/test/test-app/tsconfig.app.json
+++ b/angular/test/test-app/tsconfig.app.json
@ -3,6 +3,10 @@
  "compilerOptions": {
    "outDir": "./out-tsc/app"
  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["src/test.ts", "src/**/*.spec.ts"]
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts",
+    "src/zone-flags.ts"
+  ],
+  "include": ["src/**/*.d.ts"]
 }
--- a/angular/test/test-app/tsconfig.server.json
+++ b/angular/test/test-app/tsconfig.server.json
@ -1,8 +1,16 @@
 {
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
-    "outDir": "../out-tsc/app-server"
+    "outDir": "./out-tsc/app-server",
+    "module": "commonjs",
+    "types": [
+      "node"
+    ]
  },
+  "files": [
+    "src/main.server.ts",
+    "server.ts"
+  ],
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  }
--- a/angular/test/test-app/webpack.server.config.js
+++ b/angular/test/test-app/webpack.server.config.js
@ -1,53 +0,0 @@
-// Work around for https://github.com/angular/angular-cli/issues/7200
-
-const path = require('path');
-const webpack = require('webpack');
-
-module.exports = {
-  mode: 'none',
-  entry: {
-    // This is our Express server for Dynamic universal
-    server: './server.ts'
-  },
-  externals: {
-    './dist/server/main': 'require("./server/main")'
-  },
-  target: 'node',
-  resolve: {
-    mainFields: ['module', 'main'],
-    extensions: ['.ts', '.js']
-  },
-  optimization: {
-    minimize: false
-  },
-  output: {
-    // Puts the output at the root of the dist folder
-    path: path.join(__dirname, 'dist'),
-    filename: '[name].js'
-  },
-  module: {
-    rules: [
-      { test: /\.ts$/, loader: 'ts-loader' },
-      {
-        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
-        // Removing this will cause deprecation warnings to appear.
-        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
-        parser: { system: true },
-      },
-    ]
-  },
-  plugins: [
-    new webpack.ContextReplacementPlugin(
-      // fixes WARNING Critical dependency: the request of a dependency is an expression
-      /(.+)?angular(\\|\/)core(.+)?/,
-      path.join(__dirname, 'src'), // location of your src
-      {} // a map of your routes
-    ),
-    new webpack.ContextReplacementPlugin(
-      // fixes WARNING Critical dependency: the request of a dependency is an expression
-      /(.+)?express(\\|\/)(.+)?/,
-      path.join(__dirname, 'src'),
-      {}
-    )
-  ]
-};