Шаблоны SPA в Visual Studio

В этой статье, я расскажу о способах создания шаблонов Single Page Application приложения, включая Angular 2 & NetCore для Visual Studio.

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

В случае с Angular 2 и .NET Core возможность получить уже сконфигурированное базовое SPA-приложение и начать разрабатывать код практически сразу, несомненно выступает важным фактором, позволяющим погрузиться в новую технологию и ускорить процесс освоения материала.

Конечно, это не означает что вам не нужно ознакомиться с тонкостями настройки webpack, gulp и прочего инструментария, однако это позволяет вам не зацикливаться на всех нюансах настройки в самом начале, а отложить эти вопросы на последующее углубленное изучение темы вопроса. И это большой плюс.

Для того чтобы создать шаблонное (дефолтное) SPA-приложение Angular 2 & NetCore, существует несколько способов. Разберем их по порядку:

 

Если вы работаете в VS 2015, то шаблоны SPA можно установить следующим образом.

  • Убедитесь что версия студии VS 2015 Update 3, обновите версию при необходиомсти.
  • Запустите студию. Теперь вам доступны шаблоны SPA-приложений для разработки на популярных фреймворках, в частности на Angular

  • Обратите внимание, что если вы хотите начать разработку Angular 2 & NetCore в VS 2015, и при этом, вы уже установили средства для разработки в VS 2017 и саму студию 2017, то ввиду конфликта версий, вам целесообразнее и гораздо проще начать разработку в среде VS 2017.

 

Если вы работаете в VS 2017, то шаблоны приложения можно устанавливать средствами командной строки. Делается это следующим образом.

 

  • Подразумевается, что вы уже установили NopdeJs.
  • Выполните в командной строке команду:

dotnet new —install Microsoft.AspNetCore.SpaTemplates::*

Эта команда установит в системе шаблоны приложений для разработки на популярных фреймворках.

  • Создайте директорию проекта и перейдите в созданную директорию
  • Для создания шаблона проекта в данной директории выполните команду:

dotnet new angular

Эта команда создаст все файлы проекта в текущей директории

  • Теперь установите переменную окружения для запуска проекта в Разработческом режиме.

Для этого выполните команду:

setx ASPNETCORE_ENVIRONMENT «Development»

  • Закройте и снова откройте консоль. Перейдите в директорию созданного проекта.
  • Теперь вы можете запустить проект. Это можно сделать двумя способами:
    • Открыть проект в VS, дважды кликнув по файлу *.csproj. При открытии проекта студия сама позаботится о восстановлении всех нужных зависимостей .NET и NPM. Чтобы запустить проект в первый раз, нажмите Ctrl+F5.
    • Запустить проект из консоли. Сначала необходимо восстановить все зависимости. Для этого выполните команды:

dotnet restore

npm install

  • После завершения установки всех зависимостей. Выполните запуск проекта. Для этого выполните команду:

dotnet run

Проект будет запущен и доступен по адресу http://localhost:5000

  • Если по ким-либо причинам, вы не можете установить шаблоны приложения средствами выше описанной команды (dotnet new —install Microsoft.AspNetCore.SpaTemplates::*). В таком случае, вы можете это сделать, установив Для этого выполните в консоли следующие команды:
    • npm install -g yo generator-aspnetcore-spa
    • Создайте новую директорию проекта и перейдите в эту директорию
    • Запустите Yeoman. Для этого выполните команду:

yo aspnetcore-spa

  • Создайте шаблон приложения из консольного интерфейса Yeoman.

  • Запустите приложение любым из способов, описанных выше.

Это полностью функциональное приложение «из коробки» теперь вы можете заняться разработкой логики клиента на Typescript в среде Angular и созданием собственного web api средствами .Net Core.

  • После запуска приложения, вы заметите, что в IE приложения ведет себя не так как должно. Если посмотреть лог в Инструментах разработчика, то там вы обнаружите ошибку:

«SCRIPT5007: Не удалось получить свойство «apply» ссылки, значение которой не определено или является NULL.» Не стоит переживать, как исправить данную ошибку, выполнив необходимую конфигурацию вы узнаете из моей следующей статьи.

 

На этом все. Желаю вам успехов!

 

 

Ссылки на дополнительные источники:

https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/#comment-248725

https://jonhilton.net/2016/12/01/fast-track-your-angular-2-and-net-core-web-app-development/

https://jonhilton.net/2017/02/21/create-a-vs2017-angular-2-and-net-core-site-using-the-command-line/