Добавьте Angular 4 к ASP.Проект NETCore

Я хочу использовать Angular 4 в моем ASP.Проект NetCore 1.1 в Visual Studio 2017 (читайте как:*.файл csproj)

ранее в ASP.NET Core 1.0 и Visual Studio 2015, Вы можете просто добавить AngularJS (1.X. x) в project.json как зависимость, и она будет подключаться.

теперь, с ASP.NetCore и VS2017,project.json файл ушел, и единственная документация, которую я могу найти, относится к запуску проекта Angular 4 с помощью CLI и использования CLI для создайте новое приложение angular. Я не очень хочу новый проект или придется рефакторить все, что я создан, чтобы предоставить услугу отдельного проекта пользовательского интерфейса. Я просто хочу дополнить свое приложение дополнительным интерфейсом на стороне клиента.

какие предложения?

обновление

эти вопросы получают много просмотров, и информация мало помогает, поэтому я предоставляю это обновление.

Visual Studio 2017 (*.csproj)

  • Asp.Net Core 2.0 + угловой (v2.0~v4.0):: используйте встроенный шаблон! Лучший вариант ИМО.

  • Asp.Net Ядро 1.X + угловой (v2.0~v4.0)

    • создать VS проект.
    • создать угловой проект через угловой CLI
    • детали конфигурации и установки : ссылке

Visual Studio 2015 (project.json)

  • Tooling: до версии-preview2 - никаких дальнейших обновлений, все новые функции .NET Core будут перемещаться в VS 2017

    • Asp.Net Ядро 1.X + угловой (v2.0~v4.0)

      • Asp.Net Основной Пакет Шаблонов
      • примечание: Я бы не одобрил плохой плагин VS, Mads Kristensen делает хорошую работу.
      • детали конфигурации и установки : блог пост

    • Asp.Net Ядро 1.X + AngularJS (~1.5)

    • Asp.Net MVC 5 + AngularJS (~1.5)

Примечания:много другие способы получить Angular для работы с ASP.Net / .Проекты NetCore, такие как NPM, Bower, NuGet и т. д. Я попытался выделить те, которые просты и действительно работают. Также они соответствуют направлению, в котором движется Microsoft, согласно сообщению в блоге Pluralsight выше.

6
angular asp.net-core-1.1 c# visual-studio-2017

5 ответов

[Я знаю, что вы не спрашивали об этом конкретно, но просто хотели поделиться мыслью, которая очень актуальна на мой взгляд]

Я был в точно такой же точке несколько месяцев назад, и я решил пойти с angular cli. и я благодарю Бога, что принял это решение. Бескомпромиссно более ясно, и на самом деле все так, как должно быть: .net core web api backend и полностью разделенный угловой клиент. точно так же, как вы не поместили бы свое приложение iphone/android в VS-решение, нет никакой реальной причины ставить угловой.

обновление Либо используйте MVC с бритвой, либо используйте Angular как SPA, и если вы используете Angular, используйте Angular CLI. И если вы используете angular, подайте данные в него с помощью asp.net (core) Web Api как сервер REST

6

Я вижу, как это сбивает с толку, но Ди ЗГ прав. Вам понадобятся два отдельных проекта. Одним из них будет .net core backend api (REST), а другим-Angular 2 spa. Будет полное разделение.

с AngularJS вы можете просто поместить файл js в представление razor и назвать его днем. Однако с Angular 2/4 и React лучше всего размещать каждый проект в своем собственном решении. Это может показаться глупым поначалу, но когда вы строите свой API, он может быть легко поручились, имея возможность также используются мобильные приложения, настольные приложения и т. д.

Я знаю, что есть команда dotnet spa services angular cli powershell для .net core, но это действительно беспорядок и фактически выводит недопустимый html, который возможно быть вредным для SEO и т. д. Лучше всего, ИМО, просто использовать угловой CLI в отдельном проекте.

когда дело доходит до производства, вы будете размещать api .net core и угловые 2 проекта отдельно.

надеюсь, это поможет.

2

Мне не совсем ясно, что вы подразумеваете под "добавить угловой 4 в ASP.NET основной проект", но один из способов сделать это заключается в следующем:

  1. создайте проект Angular 4 (используя angular-cli).
  2. создать ASP.NET основной проект (с использованием .NET Core CLI) в том же каталоге, что и угловой проект.
  3. настройки webpack.конфиг.файл js (который является частью установки angular-cli), чтобы автоматически поместить связанные файлы в каталог wwwroot (webpack будет отвечать за это).

в своем блоге у меня есть подробный учебник, демонстрирующий этот подход.

1

Я работал над Angular 4 (SPA) и .Net core web api. Вы можете проверить репозиторий, и вы можете получить лучшее понимание.

Мне пришлось найти решения для многих областей, таких как аутентификация, авторизация, социальный логин, разъем MongoDB e.т. c

надеюсь, это сэкономит время для кого-то, кто наткнется на это.

https://github.com/Sathya-B/Angular-.NetCore-MongoDB

0

Я использую Angular 6 и ASP.NET ядро 2.1, но это может работать на Angular 4.

СОЗДАЙТЕ НОВЫЙ УГЛОВОЙ ПРОЕКТ В VS2017:

  1. создайте новое веб-приложение в VS. Имя папки не должно содержать '.' с Angular не примет его. Например: DatingApp-SPA. А затем выберите "пустой".
  2. закрыть VS, так что он не будет блокировать папку для любого разрешения
  3. перейдите к базовому пути к папке проекта.
  4. Run ' ng новый DatingApp-SPA'. Это добавит угловые лакомства к существующему проекту DatingApp-SPA.
  5. откройте решение снова на VS.

СОЗДАТЬ НОВЫЙ КОМПОНЕНТ:

  1. открыть командную строку и перейдите в папку проекта

  2. выполнить команду:

    ng генерировать компонент компонент-name-with-lowercase

Это создаст .формат HTML. ,спекуляция.ТС .ТС .стиль CSS файлы и обновить приложение.модуль.ТС

СОЗДАТЬ НОВЫЙ СЕРВИС:

  1. открыть командную строку и перейдите в папку проекта

  2. выполнить команду:

    ng generate service _component-name-with-lowercase_

Это создаст .ts and .спекуляция.ts по умолчанию в папке \app. Мы можем переместить эти файлы в другую папку, например \app\_services

0