Запустите собственное приложение Angular 2 с помощью Visual Studio.

Я хотел начать использовать angular 2 с приложениями .NET и после долгих поисков в Google не нашел того, что искал. Большая часть того, что я нашел, устарела и больше не работает, поэтому я решил опубликовать это, поскольку я только что настроил свое собственное приложение angular 2, используя Visual Studio, angular-cli и .NET Core.

Для начала вам необходимо:

  1. Обновите Visual Studio 2015 до Обновления 3 (или самого последнего стабильного)
  2. Установить .NET Core
  3. Обновите все доступные обновления в Visual Studio​
  4. Установите самую последнюю версию NodeJS (рекомендуется для большинства пользователей)
  5. Установите TypeScript скачать, NPM, Nuget Package или перейдите в Visual Studio › Инструменты › Расширения и обновления › Онлайн › поиск TypeScript
  • Всегда устанавливайте самую последнюю версию

Теперь откройте Visual Studio и создайте новый проект веб-приложения ASP.NET Core.

Вы можете выбрать проект .Net Core или .NET Framework, решать вам. Это не будет иметь значения для этого урока.

На следующем шаге выберите Пустой проект.

После этого перейдите в папку, в которой был создан проект. Если у вас не установлен Angular-CLI, установите его

  1. Открыть команду приглашения из {nameProjectFolder}/{src}/{nameProjectFolder}​ (например, AngularSetup/src/AngularSetup)
  2. Запустите ng init и дождитесь появления сообщения «Установлены пакеты для инструментов через npm». появляется.

Теперь у вас будет эта структура в обозревателе решений.

Как видите, у вас есть это сообщение в Visual Studio

Просто игнорируйте, все установлено. Это проблема Visual Studio. Если вас это беспокоит, я покажу, как решить эту проблему позже в этом уроке.

Теперь вам нужно изменить некоторые конфигурации. Сначала перейдите к файлу project.json внутри сеанса scripts и добавьте следующую команду:

«посткомпилировать»: [«ng build»]

В файле project.json добавьте в buildOptions следующую команду

"скомпилировать": { "исключить": "node_modules/" }

Теперь внутри файла angular-cli.json измените свойство outDir на wwwroot.

Вы почти закончили. Перейдите в файл Startup.cs и измените его следующим образом:

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

Прочтите здесь, чтобы понять, как обслуживать статические файлы в .NET Core.

Вот и все. Теперь вы просто нажимаете F5, и вы должны увидеть этот экран.

Поскольку вы использовали пустой шаблон, это решение служит только в качестве решения для внешнего интерфейса, но не стесняйтесь добавить еще один проект webapi к этому решению и получить всю внутреннюю часть. В этот проект также можно добавить всю внутреннюю конфигурацию, но это не является частью этого руководства (и я бы не рекомендовал).

Устранение сообщения об ошибке зависимостей NPM

Как мы видим, после установки зависимостей npm Visual Studio показывает сообщение о том, что наши зависимости не установлены. Это связано с тем, что у Visual Studio есть какая-то проблема при работе с внешними инструментами (в данном случае NPM). Чтобы решить эту проблему, в Visual Studio перейдите в раздел Инструменты › Параметры › Внешние веб-инструменты, и вы увидите следующее:

Вот как я настроил свою Visual Studio, и у меня больше не возникает этой проблемы. Поместите файл «.\node_modules\.bin» поверх расположения внешних инструментов, после этого щелкните правой кнопкой мыши «Зависимости» и «Восстановить пакеты». Если проблема не устранена, закройте и снова откройте Visual Studio. Если ничего из этого не работает, к сожалению, у меня закончились идеи, чтобы помочь вам =/. Попробуйте Google это немного больше, чтобы узнать, как решить.

Я надеюсь, что это поможет и извините за мой английский.

С уважением