NavContainer within Dialog (https://stackoverflow.com/a/55904133/5846045)

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo</title>
  <script id="sap-ui-bootstrap"
    src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_horizon"
    data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
    data-sap-ui-async="true"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-excludejquerycompat="true"
    data-sap-ui-resourceroots='{"demo": "./"}'
    data-sap-ui-xx-componentPreload="off"
    data-sap-ui-xx-waitForTheme="true"
  ></script>
</head>
<body id="content" class="sapUiBody">
  <div data-sap-ui-component
    data-id="rootComponentContainer"
    data-name="demo"
    data-height="100%"
    data-settings='{"id": "rootComponent"}'
  ></div>
</body>
</html>

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/Device",
  "sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
  "sap/ui/core/date/Gregorian",
], function(UIComponent, Device) {
  "use strict";

  return UIComponent.extend("demo.Component", {
    metadata: {
      interfaces: [
        "sap.ui.core.IAsyncContentCreation",
      ],
      manifest: "json",
    },

    init: function () {
      UIComponent.prototype.init.apply(this, arguments);
      this.setDensity().getRouter().initialize();
    },

    setDensity: function ({
      styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
      targetElement = document.body,
    } = {}) {
      targetElement.classList.add(styleClass);
      return this;
    },

  });
});

{
  "_version": "1.54.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "Demo",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.108",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.unified": {},
        "sap.ui.layout": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "resources": {
      "css": []
    },
    "models": {
      "device": {
        "type": "sap.ui.model.json.JSONModel"
      }
    },
    "rootView": {
      "viewName": "demo.view.App",
      "id": "rootView",
      "type": "XML"
    },
    "routing": {
      "routes": [
        {
          "name": "home",
          "pattern": "",
          "target": "home",
          "titleTarget": "home"
        }
      ],
      "targets": {
        "home": {
          "id": "homeView",
          "name": "Home",
          "transition": "fade",
          "level": 1,
          "title": "My Home"
        },
        "notFound": {
          "id": "notFoundView",
          "name": "Home",
          "transition": "slide",
          "level": 98
        }
      },
      "config": {
        "routerClass": "sap.m.routing.Router",
        "type": "View",
        "viewType": "XML",
        "path": "demo.view",
        "controlId": "rootApp",
        "controlAggregation": "pages",
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        },
        "homeRoute": "home"
      }
    }
  }
}

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  displayBlock="true"
  height="100%"
>
  <App id="rootApp" autoFocus="false">
    <pages>
      <!-- will be added by Router -->
    </pages>
  </App>
</mvc:View>

<mvc:View controllerName="demo.controller.Home"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
>
  <Page id="homePage"
    title="Home"
    class="sapUiResponsiveContentPadding"
  >
    <Button
      text="Open Dialog"
      type="Emphasized"
      press=".onPress"
    />
    <dependents>
      <core:Fragment xmlns:core="sap.ui.core"
        fragmentName="demo.view.fragment.Dialog"
        type="XML"
      />
    </dependents>
  </Page>
</mvc:View>

<Dialog id="dialog"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  title="Dialog with Page"
  contentHeight="100%"
  contentWidth="73%"
  stretch="{:= ${device>/system/phone}}"
  class="sapUiResponsivePadding--header sapUiResponsivePadding--footer"
>
  <NavContainer autoFocus="false">
    <mvc:XMLView
      viewName="demo.view.DialogView"
      type="XML"
      async="true"
    />
  </NavContainer>
  <endButton>
    <Button
      text="Close"
      press=".onClosePress"
    />
  </endButton>
</Dialog>

<mvc:View xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  height="100%"
>
  <Page
    title="Page"
    showHeader="false"
    class="sapUiResponsivePadding--content"
  >
    <Title text="Yay, content!" class="sapUiSmallMarginTop" />
  </Page>
</mvc:View>

sap.ui.define([
  "sap/ui/core/mvc/Controller",
], function(Controller) {
  "use strict";

  return Controller.extend("demo.controller.Home", {
    onPress: function() {
      this.byId("dialog").open();
    },

    onClosePress: function() {
      this.byId("dialog").close();
    },

  });
});