fix(angular): back navigation and back-button play better (#15293)

* fix(angular): use location instead of navigateByUrl
Closes #15290

* fix(angular): change router methods

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

@@ -1,6 +1,6 @@
 import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, Input, OnDestroy, OnInit, Optional, Output, ViewContainerRef } from '@angular/core';
 import { ActivatedRoute, ChildrenOutletContexts, OutletContext, PRIMARY_OUTLET, Router } from '@angular/router';
-import { StackController, RouteView } from './router-controller';
+import { RouteView, StackController } from './router-controller';
 import { NavController } from '../../providers/nav-controller';
 import { bindLifecycleEvents } from '../../providers/angular-delegate';
 

angular/src/directives/navigation/router-controller.ts

@@ -44,7 +44,7 @@ export class StackController {
 
   pop(deep: number) {
     const view = this.views[this.views.length - deep - 1];
-    this.navCtrl.goBack(view.url);
+    this.navCtrl.navigateBack(view.url);
   }
 
   private insertView(enteringView: RouteView, direction: number) {

angular/src/directives/proxies.ts

@@ -151,10 +151,10 @@ export class ChipButton {
 }
 
 export declare interface ChipIcon extends StencilComponents.IonChipIcon {}
-@Directive({ selector: 'ion-chip-icon', inputs: ['color', 'mode', 'name', 'src'] })
+@Directive({ selector: 'ion-chip-icon', inputs: ['color', 'mode', 'fill', 'name', 'src'] })
 export class ChipIcon {
   constructor(r: ElementRef) {
-    proxyInputs(this, r, ['color', 'mode', 'name', 'src']);
+    proxyInputs(this, r, ['color', 'mode', 'fill', 'name', 'src']);
   }
 }
 
@@ -709,7 +709,7 @@ export class Text {
 }
 
 export declare interface Textarea extends StencilComponents.IonTextarea {}
-@Directive({ selector: 'ion-textarea', inputs: ['color', 'mode', 'autocapitalize', 'autocomplete', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value'], outputs: ['ionChange', 'ionInput', 'ionStyle', 'ionBlur', 'ionFocus'] })
+@Directive({ selector: 'ion-textarea', inputs: ['color', 'mode', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value'], outputs: ['ionChange', 'ionInput', 'ionStyle', 'ionBlur', 'ionFocus'] })
 export class Textarea {
   ionChange: EventEmitter<any>;
   ionInput: EventEmitter<any>;
@@ -717,7 +717,7 @@ export class Textarea {
   ionBlur: EventEmitter<any>;
   ionFocus: EventEmitter<any>;
   constructor(r: ElementRef) {
-    proxyInputs(this, r, ['color', 'mode', 'autocapitalize', 'autocomplete', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']);
+    proxyInputs(this, r, ['color', 'mode', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']);
     proxyOutputs(this, ['ionChange', 'ionInput', 'ionStyle', 'ionBlur', 'ionFocus']);
   }
 }
@@ -749,9 +749,9 @@ export class Toolbar {
 }
 
 export declare interface ToolbarTitle extends StencilComponents.IonTitle {}
-@Directive({ selector: 'ion-title', inputs: ['mode', 'color'] })
+@Directive({ selector: 'ion-title', inputs: ['color'] })
 export class ToolbarTitle {
   constructor(r: ElementRef) {
-    proxyInputs(this, r, ['mode', 'color']);
+    proxyInputs(this, r, ['color']);
   }
 }

angular/src/providers/nav-controller.ts

@@ -1,4 +1,5 @@
 import { Injectable, Optional } from '@angular/core';
+import { Location } from '@angular/common';
 import { NavigationExtras, Router, UrlTree } from '@angular/router';
 
 export const enum NavIntent {
@@ -16,22 +17,28 @@ export class NavController {
   private stack: string[] = [];
 
   constructor(
+    private location: Location,
     @Optional() private router?: Router
   ) {}
 
-  goForward(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
+  navigateForward(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
     this.setIntent(NavIntent.Forward, animated);
     return this.router!.navigateByUrl(url, extras);
   }
 
-  goBack(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
+  navigateBack(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
     this.setIntent(NavIntent.Back, animated);
+    return this.router!.navigateByUrl(url, { replaceUrl: true, ...extras });
+  }
+
+  navigateRoot(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
+    this.setIntent(NavIntent.Root, animated);
     return this.router!.navigateByUrl(url, extras);
   }
 
-  goRoot(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
+  goBack(animated?: boolean) {
-    this.setIntent(NavIntent.Root, animated);
+     this.setIntent(NavIntent.Back, animated);
-    return this.router!.navigateByUrl(url, extras);
+     return this.location.back();
    }
 
   setIntent(intent: NavIntent, animated?: boolean) {

angular/test/testapp/src/app/popover/popover-page.component.ts

@@ -31,7 +31,7 @@ export class PopoverPageComponent {
   async clickMe(event?: Event) {
     const popover = await this.popoverController.create({
       component: PopoverPageToPresent,
-      ev: event
+      event
     });
     return popover.present();
   }

angular/test/testapp/src/app/simple-nav/simple-nav.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-nav-page',
   template: `
     <ion-app>
-      <ion-router-outlet stack></ion-router-outlet>
+      <ion-router-outlet></ion-router-outlet>
     </ion-app>
   `
 })