fix(angular): back button goes back to proper tab on angular 11.2.10 (#23238)

resolves #23230

angular/src/directives/navigation/ion-router-outlet.ts

@@ -147,15 +147,27 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   deactivate(): void {
     if (this.activated) {
       if (this.activatedView) {
-        this.activatedView.savedData = new Map(this.getContext()!.children['contexts']);
+        const context = this.getContext()!;
+        this.activatedView.savedData = new Map(context.children['contexts']);
+
+        /**
+         * Angular v11.2.10 introduced a change
+         * where this route context is cleared out when
+         * a router-outlet is deactivated, However,
+         * we need this route information in order to
+         * return a user back to the correct tab when
+         * leaving and then going back to the tab context.
+         */
+        const primaryOutlet = this.activatedView.savedData.get('primary');
+        if (primaryOutlet && context.route) {
+          primaryOutlet.route = { ...context.route };
+        }
 
         /**
          * Ensure we are saving the NavigationExtras
          * data otherwise it will be lost
          */
         this.activatedView.savedExtras = {};
-        const context = this.getContext()!;
-
         if (context.route) {
           const contextSnapshot = context.route.snapshot;
 

angular/test/test-app/package.json

@@ -20,40 +20,40 @@
     "test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
   },
   "dependencies": {
-    "@angular/animations": "^9.1.12",
-    "@angular/common": "^9.1.12",
-    "@angular/compiler": "^9.1.12",
-    "@angular/core": "^9.1.12",
-    "@angular/forms": "^9.1.12",
-    "@angular/platform-browser": "^9.1.12",
-    "@angular/platform-browser-dynamic": "^9.1.12",
-    "@angular/platform-server": "^9.1.12",
-    "@angular/router": "^9.1.12",
+    "@angular/animations": "^11.2.11",
+    "@angular/common": "^11.2.11",
+    "@angular/compiler": "^11.2.11",
+    "@angular/core": "^11.2.11",
+    "@angular/forms": "^11.2.11",
+    "@angular/platform-browser": "^11.2.11",
+    "@angular/platform-browser-dynamic": "^11.2.11",
+    "@angular/platform-server": "^11.2.11",
+    "@angular/router": "^11.2.11",
     "@ionic/angular": "^5.3.1",
     "@ionic/angular-server": "^5.3.1",
-    "@nguniversal/express-engine": "9.0.0-next.9",
+    "@nguniversal/express-engine": "^11.2.1",
     "angular-in-memory-web-api": "^0.11.0",
     "core-js": "^2.6.11",
     "express": "^4.15.2",
     "rxjs": "^6.5.5",
-    "tslib": "^1.13.0",
+    "tslib": "^2.0.0",
     "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.901.12",
-    "@angular/cli": "^9.1.12",
-    "@angular/compiler-cli": "^9.1.12",
-    "@angular/language-service": "^9.1.12",
-    "@nguniversal/builders": "9.0.0-next.9",
+    "@angular-devkit/build-angular": "^0.1102.10",
+    "@angular/cli": "^11.2.10",
+    "@angular/compiler-cli": "^11.2.11",
+    "@angular/language-service": "^11.2.11",
+    "@nguniversal/builders": "^11.2.1",
     "@types/express": "^4.17.7",
     "@types/node": "^12.12.54",
-    "codelyzer": "^5.2.2",
+    "codelyzer": "^6.0.1",
     "concurrently": "^6.0.0",
     "cypress": "^6.7.1",
     "ts-loader": "^6.2.2",
     "ts-node": "^8.3.0",
-    "tslint": "^6.1.3",
-    "typescript": "^3.8.3",
+    "tslint": "~6.1.0",
+    "typescript": "^4.0.7",
     "wait-on": "^5.2.1",
     "webpack-cli": "^3.3.12"
   }

angular/test/test-app/tsconfig.json

@@ -6,7 +6,7 @@
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
-    "module": "esnext",
+    "module": "es2020",
     "target": "es2015",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,

angular/test/test-app/tsconfig.server.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.app.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app-server",
-    "module": "commonjs",
+    "target": "es2016",
     "types": [
       "node"
     ]

angular/test/test-app/tslint.json

@@ -2,16 +2,37 @@
   "extends": "tslint:recommended",
   "rulesDirectory": ["codelyzer"],
   "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements"
+      ]
+    },
     "array-type": false,
     "arrow-parens": false,
+    "arrow-return-shorthand": true,
     "deprecation": {
       "severity": "warn"
     },
-    "import-blacklist": [true, "rxjs/Rx"],
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "curly": true,
     "interface-name": false,
     "max-classes-per-file": false,
-    "max-line-length": [true, 140],
+    "max-line-length": [
+      true,
+      140
+    ],
+    "eofline": true,
     "member-access": false,
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
     "member-ordering": [
       true,
       {
@@ -30,7 +51,6 @@
     "no-non-null-assertion": true,
     "no-redundant-jsdoc": true,
     "no-switch-case-fall-through": true,
-    "no-use-before-declare": true,
     "no-var-requires": false,
     "object-literal-key-quotes": [true, "as-needed"],
     "object-literal-sort-keys": false,
@@ -46,9 +66,68 @@
     "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "one-variable-per-declaration": false,
-    "component-class-suffix": [true, "Page", "Component"],
+    "component-class-suffix": [
+      true,
+      "Page",
+      "Component"
+    ],
+    "semicolon": {
+      "options": [
+        "always"
+      ]
+    },
+    "space-before-function-paren": {
+      "options": {
+        "anonymous": "never",
+        "asyncArrow": "always",
+        "constructor": "never",
+        "method": "never",
+        "named": "never"
+      }
+    },
     "directive-class-suffix": true,
+    "typedef-whitespace": {
+      "options": [
+        {
+          "call-signature": "nospace",
+          "index-signature": "nospace",
+          "parameter": "nospace",
+          "property-declaration": "nospace",
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
     "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "app", "page", "kebab-case"]
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "page",
+      "kebab-case"
+    ],
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    }
   }
 }