Обновление:, поскольку Angular время от времени выпускал новую версию, я создал Добавить последний проект Angular CLI (7.x) в проект ASP.Net Core 2.1, чтобы упомянуть как добавить проект Angular Cli в проект ASP.NET Core.

Недавно я попробовал шаблон ASP.NET Core SPA из VS2017, основанный на Angular. Мне нравится, как VS2017 наконец-то может использовать Angular и WebPack для разработки SPA. Однако шаблон был нацелен на Angular 4. Хотя новая предварительная версия ASP.NET Core 2.1 также представила новый шаблон, основанный на Angular 5, я просто не хочу устанавливать предварительную версию ASP.NET Core 2.1, поскольку для этого требуется установка VS 2017 15.6. Предварительный просмотр. ASP.NET Core 2.1.0-preview1 теперь доступен объяснил детали, если вы хотите узнать больше.

Когда Angular представил новую команду Angular Cli, она очень помогла разработчикам создать платформу для приложения SPA на основе последней версии Angular. Он также предоставил функцию генерации кода и компиляции, что помогло повысить производительность. С другой стороны, ASP.NET Core также имеет высокие темпы выпуска. Чтобы использовать эти два инструмента и не зависеть от команды Visual Studio для выпуска последнего шаблона для последней поддержки Angular, я думаю о том, есть ли способ использовать Angular CLI для создания простого проекта ASP.NET Core, который может редактировать и отлаживать из VS2017. В то же время этот подход можно будет использовать повторно, когда выйдет новая версия Angular. Я собираюсь объяснить, что я сделал для достижения этой цели.

В настоящее время VS2017 поддерживает создание проекта веб-SPA на основе Angular 4.x и немного изменил макет для использования Bootstrap. Когда разработчики используют Angular CLI, это также помогает создать структуру проекта Angular. Следующие шаги покажут вам, как объединить эти две вещи вместе, чтобы проект создания Angular CLI работал в рамках проекта ASP.NET Core 2.0.

  • Создайте проект ASP.Net, щелкнув Добавить новый проект- ›Веб-› Веб-приложение ASP.NET Core. В диалоговом окне «Новое веб-приложение ASP.NET Core» выберите следующие параметры:
  • .NET Core
  • ASP.NET Core 2.0
  • Веб-приложение (модель-представление-контроллер)
  • Нажмите «ОК».
  • Например, мы называем веб-проект ASPCoreAngular5, который находится в папке решения c: \ projects \ ASPCoreAngular5Sln.

  • После создания проекта ASP.NET Core необходимо отключить автоматический компилятор машинописного текста по умолчанию в файле проекта VS2017. Что вам нужно сделать, так это выгрузить проект, открыть проект в редакторе XML и добавить следующие строки в файл проекта.
<PropertyGroup>
<TargetFramework>netcoreapp2.0</TargetFramework>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
</PropertyGroup>
  • Убедитесь, что у вас установлена ​​последняя версия node.js, включая NPM.
  • Запустите command.exe от имени администратора и перейдите в папку решения ASPCoreAngular5, для нашего примера это будет «c: \ projects \ ASPCoreAngular5Sln».
  • Убедитесь, что у вас установлен Angular Cli. Если вы этого не сделаете, выполните следующую команду, которая установит Angular CLI глобально:
npm install -g @angular/cli@latest
  • Введите следующую команду, чтобы создать Angular Cli с той же папкой, что и решение ASP.NET Core. Это делается для того, чтобы package.json и .angular-cli.json располагались на том же уровне, что и папка проекта ASP.NET Core, которая находится на один уровень ниже папки решения. Я также использовал - source-dir ClientApp, который делает исходную папку Angular App ClientApp.
  • routing: создать модуль маршрутизации.
  • skip-git: пропустить создание git
  • каталог: укажите папку как ClientApp. код TS на стороне клиента будет расположен в папке ClientApp, которая находится в папке проекта ASPCoreAngular5.
ng new ASPCoreAngular5 —-routing --skip-git --source-dir ClientApp

  • После создания проекта вы можете запустить ng serve для тестирования приложения. Поскольку сервер ng создает файлы в памяти для использования браузером. Вам нужно собрать проект angular, если вы хотите увидеть фактические файлы JS.
  • Когда Angular CLI создает проект, он сгенерирует все файлы для файла, определенного в файле .angular-cli.json. Откройте файл .angular-cli.json и измените вывод на «../wwwroot/dist». Это создаст встроенные файлы в папку wwwroot.
  • root: определите корневую папку, в нашем случае «ClientApp» будет корнем TypeScripts.
  • outDir: это выходная папка. Мы собираемся сгенерировать выходные файлы в папку wwwroot / dist, на которую будет ссылаться index.cshtml.
  • стили: стиль css, который вы хотите включить. Если вы используете bootstrap, вам нужно включить сюда bootstrap css.
  • скрипты: библиотеки JavaScript, которые вы хотите включить. Мы использовали bootstrap и jQuery, поэтому нам нужно объединить их. Вы можете пропустить их, если хотите включить их CDN в index.cshtml.
“apps”: [
{
“root”: “ClientApp”,
“outDir”: “./wwwroot/dist”,
“assets”: [
“assets”,
“favicon.ico”
],
“index”: “index.html”,
“main”: “main.ts”,
“polyfills”: “polyfills.ts”,
“test”: “test.ts”,
“tsconfig”: “tsconfig.app.json”,
“testTsconfig”: “tsconfig.spec.json”,
“prefix”: “app”,
“styles”: [
“styles.css”,
“../node_modules/bootstrap/scss/bootstrap.scss”
],
“scripts”: [
“../node_modules/jquery/dist/jquery.min.js”,
“../node_modules/bootstrap/dist/js/bootstrap.bundle.js”
],
  • Вернитесь в командную строку и убедитесь, что вы находитесь в папке проекта (в нашем случае это будет «c: \ projects \ ASPCoreAngular5Sln \ ASPCoreAngular5»). Введите следующую команду, чтобы построить свои угловые решения. Файлы будут созданы в папке wwwroot / dist. Все библиотеки и css будут связаны с файлами js.
Ng build

  • Затем нам нужно изменить представление ASP.NET Core, чтобы добавить туда сгенерированные JS. Откройте свой Views / home / index.cshtml и замените его следующим кодом. ‹App-root› будет угловой точкой входа.
@{
ViewData[“Title”] = “Home Page”;
}
<app-root></app-root>
  • Откройте _layout.cshtml, удалили исходные ссылки Javascript и заменили код следующим:
  • ‹Base href =” ~ / ”›: укажите базовый URL.
  • Скрипты: ссылка на файлы скриптов, сгенерированные Angular Cli.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<title>@ViewData[“Title”] — ASPCoreAngular5_2</title>
<base href=”~/” />
</head>
<body>
@RenderBody()
<script src=”~/dist/inline.bundle.js” asp-append-version=”true”></script>
<script src=”~/dist/polyfills.bundle.js” asp-append-version=”true”></script>
<script src=”~/dist/styles.bundle.js” asp-append-version=”true”></script>
<script src=”~/dist/vendor.bundle.js” asp-append-version=”true”></script>
<script src=”~/dist/main.bundle.js” asp-append-version=”true”></script>
@RenderSection(“Scripts”, required: false)
</body>
</html>
  • До сих пор вы должны иметь возможность запускать свой проект ASP.NET Core SPA, нажав F5. однако, если вы хотите использовать сервер Angular CLI для отладки, вам необходимо указать приложению ASP.NET Core использовать сервер Angular CLI для создания файлов вместо Visual Studio. Преимущество использования Angular CLI-сервера заключается в том, что вам не нужно перезапускать проект отладки из Visual Studio. Всякий раз, когда вы сохраняете свой код TypeScript, сервер Angular CLI компилирует его, а отладчик Visual Studio может улавливать любые изменения. Для этого вам необходимо добавить пакет Microsoft.AspNetCore.SpaServices.Extensions, который можно установить из управления пакетами nuget.
  • После установки расширения откройте startup.cs и добавьте следующую выделенную часть в метод configure () для поддержки Angular CLI Server и маршрутизации URL-адресов SPA:
  • SourcePath: мы сгенерировали код Angular в папке «ClientApp», и метод spa.UseAngularCliServer () будет вызываться только в режиме разработки.
  • MapSpaFallbackRoute: сообщите ASP.NET Core о маршрутизации маршрутизации SPA.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseBrowserLink();
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler(“/Home/Error”);
}
app.UseSpa(spa =>
{
spa.Options.SourcePath = “ClientApp”;
if (env.IsDevelopment())
{
spa.UseAngularCliServer(npmScript: “start”);
}
});
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: “default”,
template: “{controller=Home}/{action=Index}/{id?}”);
routes.MapSpaFallbackRoute(
name: “spa-fallback”,
defaults: new { controller = “Home”, action = “Index” });
});
}
  • Теперь вы можете нажать F5, чтобы запустить приложение в браузере. Мы работаем в режиме разработки, всякий раз, когда вы меняете свой код TypeScript из Visual Studio, бэкэнд Angular Server перекомпилирует код и обновляет ваш браузер.
  • Если вы хотите генерировать код всякий раз, когда вы компилируете проект ASP.NET Core для развертывания, вы можете добавить задачи NPM в процесс перед сборкой в ​​«Task Runner Explorer». У вас будет Angular CLI для компиляции кода при создании проекта ASP.NET Core.

Теперь у вас должен быть работоспособный проект ASP.NET Core с последними кодами, сгенерированными интерфейсом командной строки Angular 5. Вы можете создать некоторый веб-API ASP.NET Core и использовать Angular CLI для создания ваших компонентов.