Angular app in UWP project does not load second page

I have an Angular project that I am trying to incorporate into a Universal Windows Platform (UWP) application. I have tested the Angular code in my web browser, and all works as expected there. When I try to run the Angular application, that is housed with-in the UWP app bundle, I am unable to navigate to pages.

Technical Stack

I have an Angular web application that I have tested in a web browser. it works fine. I run the following command to build the application.

ng build --base-href=/Assets/Web

I then take the built files, and copy them into my UWP project. The folder structure is below.

-- Root
---- Assets
------ Web
-------- assets
-------- index.html
-------- main.js
-------- main.js.map
-------- ect...

Basically, the Angular project is put into the /Assets/Web folder within my UWP project.

Then in my MainPage.xaml file I have a WebView with the following code.

 <WebView 
    Name="webView"
    Source="ms-appx-web:///Assets/Web/index.html"
    NavigationStarting="WebView_NavigationStarting"></WebView>

Problem

When I run my UWP app I see the initial landing page of my Angular project and all images/styles load correctly. When I click on to the next page in my Angular app, via a this.router.navigate([RouterLinks.secondPage]) command then the screen just turns white. I see the following in my JavaScript console.

HTML1300: Navigation occurred.
secondPage
HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "!DOCTYPE html>".
secondPage (1,1)

It looks like the routing started to the correct page, but it seems that the rendering never completed.

On initial app load I see a bunch of errors in my VS Output window.

'Identity.exe' (Script): Loaded 'Script Code (WebView/3.0)'. 
SourceMap ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/runtime.js.map read failed: The URI prefix is not recognized..SourceMap ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/polyfills.js.map read failed: The URI prefix is not recognized..Exception was thrown at line 1145, column 35 in ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/polyfills.js
0x800a139e - JavaScript runtime error: 2
SourceMap ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/styles.js.map read failed: The URI prefix is not recognized..SourceMap ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/scripts.js.map read failed: The URI prefix is not recognized..Exception was thrown at line 1323, column 21 in ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/scripts.js
0x800a139e - JavaScript runtime error: SyntaxError
Exception was thrown at line 1341, column 21 in ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/scripts.js
0x800a139e - JavaScript runtime error: SyntaxError
Exception was thrown at line 10757, column 21 in ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/scripts.js
0x800a138f - JavaScript runtime error: Array.prototype.filter: 'this' is null or undefined
Exception was thrown at line 10757, column 21 in ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/scripts.js
0x800a138f - JavaScript runtime error: Array.prototype.map: 'this' is null or undefined

Then after the router navigation I see the following errors in the Output window.

Exception was thrown at line 67843, column 4 in ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/vendor.js
0x800a139e - JavaScript runtime error: SyntaxError
Exception was thrown at line 63600, column 13 in ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/vendor.js
0x800a139e - JavaScript runtime error: [object Object]
Exception was thrown at line 63658, column 9 in ms-appx-web://d4abdafc-2387-4a97-9c8e-b370601c7288/Assets/Web/vendor.js
0x800a139e - JavaScript runtime error: [object Object]

This is when I see the blank screen.

I know this issue has something to do with these errors, but not sure how to fix them. I even tried to put the entire Angular project straight into the root directory of my UWP project, and still had the same issue.

One thing to mention is I did have this as a UWP Web Context application, and during that time everything worked correctly. Unfortunately, I had to move away from that template since I had a need to integrate API calls using the native layer. Right now this is a simple blank UWP project.

Does anyone have any idea what I could be doing wrong?

Thanks!

Turns out the issue was the submit input type was causing the form to submit and would actually load the URL from the router.navigate command. It is a very strange issue, and seems to only occur in the Edge browser. All other browsers the submit event was prevented internally by Angular.

I fixed the issue by passing the event into the click function via the HTML template, and called the preventDefault() function on the event within my custom handler. This stopped the browser from submitting the form and thus sending the browser to a different URL that does not exist. See example below.

In form.component.html

<input id="submit" role="button" (click)="myEventHandler($event);" value="Submit" type="submit" />

In form.component.ts

myEventHandler = function (e) {

    if (e) {
      e.preventDefault();
    }

    this.router.navigate(["nextPage"]);
}