Ошибка рукопожатия .NET Core и Angular 8 WebSocket

Question

Я играю с Angular 8.x уже неделю.Сегодня я действительно пытался создать .NET Core приложение с Angular 8.x.Я на .NET Core 2.2.x с Angular 8.x.Когда я запускаю приложение через Visual Studio 2019, я вижу, что приложение загружается на веб-странице очень долго, что отличается от запуска исключительно Angular.Я проверил консоль браузера Chrome и вижу следующее:

sockjs.js:1683 WebSocket connection to 'ws://localhost:41211/sockjs-node/909/dtwlrua0/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

У меня нет сильного сетевого фона, но я полагаю, что это проблема.Как мне это исправить?

В качестве примечания: это базовое (по крайней мере для меня) приложение, поэтому не требуется много обработки.Я на самом деле использую этот учебник.Согласно разделу диагностики в Visual Studio, потребовалось ~ 35 секунд, чтобы фактически отобразить данные на странице (просто список сообщений из C # Corner RSS-каналов).

РЕДАКТИРОВАТЬ: я забыл упомянуть (но кто-нибудькто использует .net core / angular combo, вероятно, поймает это).Мне пришлось изменить ClientApp по умолчанию, который генерируется с помощью приложения .NET Core.Это было на Angular версии 6. Я удалил папку и использовал angular cli для создания части ClientApp, чтобы я мог использовать Angular 8.x.

Answer 1

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

Угловые приложения - это одностраничные приложения. Вы создаете их в соответствии с процессом, задокументированным на Angular Site , используя Angular CLI , чтобы помочь вам в этом процессе. Когда вы создаете свое приложение в режиме разработки, оно попытается подключиться к серверу веб-пакетов, чтобы получать уведомления об обновлениях (таким образом, когда вы используете ng serve, оно автоматически перекомпилирует и обновит страницу). Эта функция отсутствует в производственной сборке (ng build --prod).

Обслуживание углового приложения

По сути, проект ASP.Net бесполезен в том, что касается самого приложения Angular. Когда вы компилируете код Angular, команда ng build запускает веб-пакет, среди других процессов, производя несколько .css, .js и одну страницу index.html, которая отображает ваше приложение (имя страницы может быть сконфигурирован). Любой веб-сервер, способный обслуживать статические файлы, может обслуживать index.html и, следовательно, запускать ваше приложение.

Однако большинству Angular-приложений необходим какой-то бэкэнд. Вот где может пригодиться основное приложение .NET. Вы должны перезвонить на ваш основной сервер .NET с внешнего интерфейса Angular, используя HttpClient.

У меня есть приложение Angular, работающее с ядром .Net как в рабочей, так и в тестовой конфигурации. Для производства у меня есть следующее:

• Обычный сайт, настроенный в IIS с возможностью обслуживания статических файлов (для приложения Angular)
• Виртуальный каталог /api, в котором размещена упакованная / опубликованная версия основного API-проекта ASP.Net. Обратите внимание, что этот проект не имеет жесткой связи с приложением Angular
• Мы разделили код определения объекта между двумя проектами - я создал генератор кода, который создает Typescript для приложения Angular и C # для серверной части на основе NJsonSchema .

Для тестирования / разработки я настроил прокси-конфигурацию для сервера веб-пакетов. Таким образом, нажатие кнопки «Выполнить» в VisualStudio запускает прослушивание проекта API на localhost:5800, а команда ng serve запускает сервер Angular Webpack на localhost:4200. Запросы на localhost:4200/api передаются на localhost:5800.