Создание SPA веб-приложения на базе ASP.NET Core с использованием Angular в среде разработки Visual Studio 2017

В данной статье мы рассмотрим подробную инструкцию по установке и настройке всех необходимых инструментов для создания нового проекта одностраничного (SPA — Single Page Application) web-приложения на базе платформы ASP.NET Core 2.0 с использованием фреймворка Angular 2.x в среде разработки Microsoft Visual Studio 2017.

Для начала необходимо убедиться, что установлены все необходимые компоненты для Visual Studio 2017

VS ASP.NET component
VS ASP.NET component
VS Node.js component
VS Node.js component

Заходим на сайт https://nodejs.org/, скачиваем и устанавливаем рекомендованную для большинства пользователей версию (LTS).

node.js
node.js

Создать папку проекта в проводнике.

Create Folder
Create Folder

Открываем консоль.

Win+R cmd
Open cmd
Open cmd

Переходим в папку проекта.

d:
cd vs/angular2
Go to folder
Go to folder

Создаем новое приложение ASP.NET Core with Angular 2.x.

dotnet new angular
Create angular project
Create angular project

Восстанавливаем пакеты решения.

dotnet restore

 

Restore .net libs
Restore .net libs

Восстанавливаем пакеты NPM. Этот процесс займет немного времени.

npm install
Restore npm libs
Restore npm libs

После этого мы можем запустить созданное нами решение.

Angular2.csproj
Start VS project
Start VS project

В результате откроется среда разработки Visual Studio 2017. В обозревателе решения мы видим все созданные файлы проекта.

VS solution
VS solution

Запускаем проект для проверки его работы нажатием кнопки F5 (или нажатием кнопки Play) на локальном IIS Express сервере, и получаем следующий результат.

Hello, World Angular
Hello, World Angular

Обратите внимание, что во время первого запуска приложения брандмауэр Windows может потребовать разрешения на работу в сетях. Предоставляем доступ.

permission
permission