Угловое приложение в проекте UWP не загружает вторую страницу

Question

У меня есть проект Angular, который я пытаюсь включить в приложение универсальной платформы Windows (UWP).Я проверил код Angular в своем веб-браузере, и там все работает как положено.Когда я пытаюсь запустить приложение Angular, которое находится внутри пакета приложений UWP, я не могу перейти на страницы.

Технический стек

У меня естьугловое веб-приложение, которое я протестировал в веб-браузере.это работает отлично.Я запускаю следующую команду для сборки приложения.

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

Затем я беру встроенные файлы и копирую их в свой проект UWP.Структура папок приведена ниже.

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

По сути, проект Angular помещается в папку / Assets / Web в моем проекте UWP.

Затем в моем файле MainPage.xaml у меня естьWebView со следующим кодом.

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

Проблема

Когда я запускаю свое приложение UWP, я вижу начальную целевую страницу моего проекта Angular и загружаются все изображения / стилиправильно.Когда я нажимаю на следующую страницу в своем приложении Angular с помощью команды this.router.navigate([RouterLinks.secondPage]), экран просто становится белым.В консоли JavaScript я вижу следующее:

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

Похоже, что маршрутизация началась на правильной странице, но кажется, что рендеринг не завершился.

При начальной загрузке приложения я вижукуча ошибок в моем окне вывода VS.

'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

Затем после навигации маршрутизатора я вижу следующие ошибки в окне вывода.

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]

Это когда я вижу пустоеscreen.

Я знаю, что эта проблема связана с этими ошибками, но не знаю, как их исправить.Я даже пытался поместить весь проект Angular прямо в корневой каталог моего проекта UWP, и у меня все еще была та же проблема.

Одна вещь, которую стоит упомянуть, это то, что у меня было это как приложение веб-контекста UWP, и во времятогда все работало правильно.К сожалению, мне пришлось отойти от этого шаблона, так как мне нужно было интегрировать вызовы API с использованием нативного уровня.Прямо сейчас это простой пустой проект UWP.

Кто-нибудь знает, что я могу делать не так?

Спасибо!

Answer 1

Оказывается, проблема заключалась в том, что тип ввода отправки заставлял форму отправляться и фактически загружал URL-адрес из команды router.navigate.Это очень странная проблема, которая, похоже, возникает только в браузере Edge.Во всех других браузерах событие отправки было предотвращено внутри Angular.

Я исправил проблему, передав событие в функцию щелчка через шаблон HTML, и вызвал функцию preventDefault() для события в моем пользовательском обработчике.Это остановило браузер от отправки формы и тем самым отправил браузер на другой URL, который не существует.См. Пример ниже.

В form.component.html

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

В form.component.ts

myEventHandler = function (e) {

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

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