Когда вы разрабатываете приложение Angular, которое подключается к серверной части, в некоторых случаях вы можете захотеть обслуживать файлы внешнего интерфейса непосредственно как часть внутреннего приложения, а не как независимое приложение.
Пример? Для упрощения процесса аутентификации и авторизации.
В этом сценарии вы можете делегировать коду ASP.NET управление сеансом аутентификации (файлы cookie и т. д.), избегая необходимости управлять токенами аутентификации — с последующими проблемами истечения срока действия/обновления.
В этой статье я проведу вас через простой процесс создания приложения Angular и буду использовать его непосредственно как часть вашего веб-приложения ASP.NET Core.
Создание углового приложения
То, как мы создаем приложение Angular, не меняется, мы используем Angular CLI, как обычно:
ng new demo-app
Запустив приложение сейчас с помощью ng serve, мы увидим классический вывод шаблона starter:
Не так интересно, но для демонстрационных целей сойдет.
На этом этапе мы построим приложение, чтобы получить вывод dist.
ng build --prod
Хорошо, пока достаточно на стороне Angular. Перейдем к Visual Studio.
Создание основного приложения ASP.NET
Откройте Visual Studio и создайте новое веб-приложение, выбрав Файл › Новый проект › Веб-приложение ASP.NET Core, дайте ему имя и выберите шаблон Веб-приложение:
Если мы запустим приложение с помощью F5 (или CTRL + F5), мы увидим, что Visual Studio, как обычно, создала для нас стартовую страницу:
Мы хотим заменить этот контент нашим фактическим приложением Angular, поэтому давайте начнем с импорта проекта Angular в каталог нашего проекта ASP.NET Core.
Переместите проект Angular в каталог основного проекта ASP.NET.
Как следует из названия, мы должны взять папку, содержащую проект Angular, и переместить ее в папку, созданную для проекта Visual Studio.
Я назвал свой проект Angular demo-app, а проект ASP.NET Core DemoAngularIntegration, поэтому результирующая иерархия файловой системы будет следующей:
Теперь, когда у нас есть файлы Angular, нам нужно настроить пару вещей в нашем приложении ASP.NET.
Измените разметку _Layout.cshtml
Если мы хотим, чтобы наше приложение ASP.NET Core загружало код Angular, нам действительно нужно сослаться на эти файлы и перенести код Angular в наше приложение.
Первый шаг — изменить основную разметку _Layout.cshtml, чтобы она совпадала с файлом index.html нашего приложения Angular внутри выходной папки dist.
Откройте файл ~/Pages/Shared/_Layout.cshtml, удалите его содержимое и скопируйте/вставьте разметку из ~/[your_ng_app_name]/dist/[your_ng_app_name]/index.html.
Результат должен выглядеть примерно так:
Установите пакет NuGet BuildBundlerMinifier.
Откройте Консоль диспетчера пакетов и выполните следующую команду, чтобы установить необходимый пакет:
Install-Package BuildBundlerMinifier
Мы будем использовать этот пакет, чтобы убедиться, что пакеты обновляются каждый раз, когда мы компилируем проект.
Создайте пакеты Angular JS и CSS
Давайте воспользуемся преимуществами нового механизма bundleconfig в ASP.NET Core и настроим пакеты, которые мы будем загружать на нашей странице _Layout.
Создайте файл с именем bundleconfig.json на корневом уровне вашего приложения и вставьте следующий код json:
Обратите внимание, что вместо demo-app вы должны написать свое фактическое имя приложения Angular.
Ссылка на пакеты из _Layout
Теперь нам нужно вставить ссылки на пакеты на страницу _Layout.
Окончательный код должен быть следующим:
Если вы запустите приложение сейчас, оно не будет работать, и это потому, что мы все еще пропускаем вызов метода @RenderBody() в разметке _Layout.
Восстановить вызов метода RenderBody()
Просто поместите оператор RenderBody() вместо компонента <app-root>, переместив его на страницу ~/Pages/Index.cshtml.
В конце этой операции вы должны получить такой результат:
Запустите приложение — проверьте
Мы готовы запустить приложение, и если мы все сделали правильно, мы должны увидеть приложение Angular, обслуживаемое из приложения ASP.NET Core:
