Введение в ASP.NET Core и Angular

В этом руководстве рассмотрим создание приложения на ASP.NET Core 3 в связке с Angular 10.

Вначале создадим проект на ASP.NET Core, который будет использовать Angular. Для проекта выберем шаблон Empty , то есть пустой шаблон.

Пусть проект будет называться "HelloAngularApp". Стоит отметить, что Visual Studio предоставляет шаблон Angular , который сразу же позволяет создать проект с некоторой базовой структурой и с уже настроенной конфигурацией на использование Angular. Но в данном случае выберем именно шаблон Empty , чтобы полностью проконтроллировать процесс конфигурации и не создавать ничего лишнего.

По умолчанию новый проект ASP.NET Core не обладает никакой встроенной поддержкой работы с Angular. Один из способов работы с Angular в рамках проекта ASP.NET Core представляет пакет Microsoft.AspNetCore.SpaServices.Extensions или проще говоря SpaServices. Поэтому вначале установим данный пакет через Nuget:

После добавления пакета создадим в проекте новую папку, которая будет называться ClientApp и которая впоследствии будет хранить файлы и конфигурацию приложения Angular.

Далее добавим в только что созданную папку ClientApp новый файл package.json , который представляет шаблон npm Configuration file :

Изменим содержимое этого файла следующим образом:

Здесь определены все необходимые пакеты фреймворка Angular, а также пакеты, которые помогут при разработке, в частности, TypeScript и Webpack.

Стоит отметить определение команды "start" в секции scripts: "start": "echo hello && ng serve" . Выполнение команды "echo" перед командой "ng serve", которая запускает сервер с приложением Angular, - это своего рода хак для решения проблемы, описанной в https://github.com/dotnet/aspnetcore/issues/17277. Но в будущем, надеюсь, Microsoft исправит подобную ситуацию, и подобный зак больше не понадобится.

Также для избежания подобной ситуации я рекоммендую при отладке запускать проект по протоколу http, а не https.

Итак, сохраним файл и установим пакеты. Для этого в Visual Studio перейдем к окну Package Manager Console . (Например, через пункт меню Tools -> NuGet Package Manager -> Package Manager Console ).

В этом окне сначала перейдем к папке, где находится файл package.json с помощью команды cd . Поскольку в моем случае проект называется HelloAngularApp и соответственно располагается в папке HelloAngularApp, а файл package.json в рамках проекта располагается в папке ClientApp, то я ввожу команду

Далее введем команду

Также добавим в проект файл конфигурации TypeScript tsconfig.json :

После добавления изменим содержимое файла следущим образом:

Далее в каталоге ClientApp создадим новую папку src , которая будет хранить файлы приложения angular. В этой папке создадим каталог app , в который добавим новый файл app.component.ts :

В файле app.component.ts определим код главного компонента приложения:

Также в папку ClientApp/src/app добавим новый файл app.module.ts , который будет представлять главный модуль приложения:

Далее в папку ClientApp/src добавим новый файл main.ts , с которого будет начинатся загрузка приложения:

Кроме собственно загрузки приложения данный файл определяет код для перезапуска приложения с помощью Hot Module при изменениях в файлах с исходным кодом.

И также в папку ClientApp/src добавим файл polyfills.ts :

И также в папку ClientApp добавим новый json-файл angular.json

который будет определять конфигурацию Angular Cli:

Таким образом, все файлы будут компилироваться в две сборки - app.js и polyfills.js, которые будут располагаться в папке wwwroot/dist.

Теперь добавим в проект папку ClientApp/src главную веб-страницу приложения - файл index.html :

В итоге весь проект будет выглядеть следующим образом:

И в конце изменим файл Startup.cs :

Прежде всего в методе ConfigureServices() вызывается метод AddSpaStaticFiles() , который регистрирует сервис ISpaStaticFileProvider. Данный сервим позволяет обрабатывать статические файлы приложения Angular из определенного местоположения. Расположение файлов задается с помощью параметра configuration.RootPath . В данном случае это каталог ClientApp/dist , куда, как мы указали в файле angular.json, должны помещаться скомпилированные файлы. То есть данный сервис необходим нам, когда разработка завершена, файлы Angular на typescript скомпилированы в файлы javascript, а все приложение ASP.NET Core уже развернуто на сервере в режиме production.

Далее в методе Configure() добавляются соответствующие middleware, которые позволяют работать с приложением Angular.

Во-первых, если разработка закончена и приложение уже в состоянии развертывания, вызывается метод UseSpaStaticFiles() , который позволяет направлять запросы к нашему приложению Angular.

Далее вызывается метод app.UseSpa() , который позволяет в ответ на запросы отправлять веб-страницу по умолчанию (index.html). Этот middleware должен помещаться в конце конвейера.

В методе app.UseSpa() , если приложение находится в режиме разработки, в конвейер обработки запроса добавляется компонент spa.UseAngularCliServer . Этот компонент middleware позволяет настроить проект таким образом, что веб-сервер для приложения ASP.NET Core автоматически запускает сервер Angular CLI. Кроме того, UseAngularCliServer устанавливает прокси между сервером приложения ASP.NET Core и сервером приложения Angular. В качестве параметра метод принимает запускаемую команду из package.json. В данном случае это команда "start" ( "echo hello && ng serve" ), которая собственно и запускает веб-сервер Angular CLI.

То есть когда мы запустим проект ASP.NET Core на выполнение, фактически будут запущены два сервера с двумя приложениями, которые через прокси будут обмениваться данными. Если мы изменим код в файлах Angular, то моментально произойдет перекомпиляция файлов на typescript, и мы увидим результаты наших изменений в браузере. Однако если мы изменим код приложения ASP.NET Core (то есть код C#), тогда будет потребуется перекомпиляция и перезапуск всего приложения ASP.NET Core, что также перезапустит сервер с приложением Angular. Что, в конечном итоге, приведет к увеличению времени запуска и некоторому замедлению процесса разработки. Собственно это основной минус UseAngularCliServer. Хотя можно запускать отдельно оба сервера вручную.

Запустим проект на выполнение, в итоге Angular CLI скомпилирует приложение, с которым мы сможем взаимодействовать в рамках приложения ASP.NET Core:

Таким образом, мы можем совместить разработку приложения Angular и ASP.NET Core. Но, кроме этого, нам надо установить настроить конфигурацию проекта, чтобы при его публикации также были скомпилированы и включены в выходной пакет приложения ASP.NET Core файлы приложения Angular. Для этого отредактируем файл проекта ASP.NET Core. Например, в моем случае сейчас он выглядит следущим образом:

Изменим его следующим образом:

Теперь в узле PropertyGroup с помощью элемента SpaRoot устанавливается корневой каталог приложения Angular. То есть в данном случае это каталог ClientApp. С помощью узла Target устанавливаются настройки публикации. Например, элемент

будет запускать команду "npm run build -- --prod" , которая будет компилировать приложение Angular.

Таким образом, после публикации в папке скомпилированного приложения мы сможем найти скомпилированные файлы приложения Angular: