Как связать .NetCore API + Angular Front end

Question

У меня есть внешний интерфейс c с интерфейсом angular, который работает с серверной частью .NetCore. Два проекта связаны вместе с помощью веб-пакета. Проблема в том, что мне нужно включить рендеринг на стороне сервера, а Microsoft устарела / устарела. Я следовал этому учебнику , но он не очень хорошо работает. net core 3.0 / 3.1 очень хорошо работает. Когда я получаю эту работу, я получаю FOU C (Fla sh с необрабатываемым контентом), и скорость загрузки страницы очень низкая.

Учитывая вышесказанное, как я могу развернуть. net core API / Angular приложение переднего плана с рендерингом на стороне сервера?

Answer 1

Вы уже пытались развернуть приложение в IIS? Или вы можете также изменить ASPNETCORE_ENVIRONMENT (Свойства проекта -> Отладка -> ASPNETCORE_ENVIRONMENT = Production) на prod и просто запустить приложение.

Теперь комплекты angular не создаются при запуске приложения , Для этого вам нужно выполнить следующие команды из папки ClientApp (проверьте ваш файл csproj, они прямо там):

npm run build --prod
npm run build:ssr --prod

Теперь генерируются файлы сборки angular. Если вы видите папку dist / browser рядом с папкой dist / server , то приложение не будет отображаться в производственном режиме. Содержимое папки браузера должно находиться рядом с папкой сервера (это известная ошибка, но Microsoft больше не будет ее менять). Если это не так, вы всегда можете обойти это, изменив файл angular. json: проекты: ClientApp: architect: build: options: outputPath = dist , а не dist / browser. Таким образом, приложение будет работать в режиме разработки так же, как и в режиме производства. Файлы «браузера» всегда будут находиться в папке dist, а ASP. NET Core всегда будет смотреть в папку dist, независимо от настроек среды.

После вашего сервера angular / файлы браузера были созданы, вы должны иметь возможность запускать приложение в обычном режиме.

Можете ли вы попробовать это? Я тоже попробую.

Обновление:

Я попробовал свое руководство из https://medium.com/@pieterjandeclippel / server-side-render-in- asp - net -core- angular -6df7adacbdaa , с. NET Core 3.1, и он все еще работает.

Не могли бы вы попробовать выполнить следующие шаги?:

1. Откройте файл angular. json, найдите проекты : ClientApp: architect: build: options: outputPath и убедитесь, что для него установлено значение dist вместо расстояние / браузер . Установка этого параметра в dist приведет к тому, что приложение будет вести себя одинаково в режиме разработки и производства.
2. При необходимости удалите папку dist внутри вашего ClientApp.

3. Выполните следующие команды из папки ClientApp : npm run build --prod и npm run build:ssr --prod

4. Откройте страницу свойств вашего проекта → вкладка «Отладка» → Измените ASPNETCORE_ENVIRONMENT на Production

5. F5 для запуска приложения

Какой результат вы получаете? Вы также можете прочитать много информации из окна «Вывод», если что-то вроде этого не работает ...

Если это работает, то, похоже, вам просто нужно быть более терпеливым и ждать появятся файлы сборки сервера. Итак, во время разработки:

1. Вы можете установить для переменной ASPNETCORE_ENVIRONMENT значение Development
2. Вы можете удалить папку ClientApp / dist
3. При запуске проекта браузер + сервер запускаются команды сборки, как указано в файле Startup.cs
4. Просто наберитесь терпения и дождитесь появления папки dist / server
5. Refre sh в окне браузера