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"]);
}
Related
A lot of times when your ASP.NET Core application does not start, you see this page:
This page is different from app.UseDeveloperExceptionPage();.
And debugging this page is hard and sometimes tricky.
Is it possible to somehow get the underlying exception that causes this error and show it in this page?
For example, an instance that this page might be shown is that a DLL is not found. It would be awesome if we could catch that exception and show an <h1> at the bottom
DLL not found. DLL name: Something.dll
Our asp.net web app is returning Error 520 on a page in production though no error in development.
This particular error skips our custom error page and present a different error page with Cloudflare.
As in this image
When you inspect the page, you see
"Error: Promised response from onMessage listener went out of scope"
in console
No error is logged by our logging tools, and we cannot tell why it's skipping our custom error page.
Any direction as to how to solve this?
I am attempting to create a custom error page display to run in my app when there is an issue with the database connection string.
When I alter the string to something invalid, I receive the error mentioned in the title above.
Is there any way to override this page and show a more informative one that would tell me that my DB connection string is wrong?
There is a InvalidOperationException that is thrown in the Startup.cs file, but I'm unsure on how to extract this from the startup file and use it, when my app fails to start in the first place.
Is this possible to do?
You can disable the default error page by using the disableStartUpErrorPage="true" setting in web.config for the IIS hosting module. This will just fallback to another custom error page of your choosing served by IIS, rather than allowing you to show a dynamic custom page.
Documentation
We have 3 servers in a DMZ that serve our student web portal. We've been seeing this error:
The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled.
Details: Error parsing near '</div>
</div>
</div>
after clicking next page on a grid pager. On inspecting element, this is the code that gets executed: __doPostBack('pg0$V$1','')". Now, this works as it should if I go into the individual servers and click next page on this table but throws the error above when behind the f5 load-balancer. We have no clue why this is happening. One speculation is since we do inline http to https, that could be a potential issue. We have no control over the ASP.NET code since it's provided by a third-party but the ASP.NET code doesn't seem to be the issue here since it works on the individual servers.
I have this exception:
[Microsoft.WindowsAzure.Messaging.RegistrationAuthorizationException] = {Microsoft.WindowsAzure.Messaging.RegistrationAuthorizationException: HTTP request failed.
HTTP Details:
Status: 401
Reason: Unauthorized
Full content: 401ExpiredToken: . TrackingId:8a536a39-5852-4b36-8eae-b7e46ccdfe78_G0,T...
I have a Windows Phone 8.1 silverlight application. The application registers itself for toast notifications. All was working fine until I got the request to allow the customer (limited audience) to update the text displayed on the screen. So I provided them with a web form that they can update the content and the phone app reads the content from the web and displays it.
However after adding this code that uses async/await keywords I now get this new exception when I try to register the notification.
The line that throws is:
await hub.RegisterNativeAsync(args.ChannelUri.ToString());
I can't see how adding code to main.xaml.cs could impact code in the app.xaml.cs, but it has. My thinking is the await/async keywords are getting confused. Anyone have any idea what might be happening here? BTW:I updated the time in the emulator as that seemed to be the only other time people got this error.