Добавить 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 с использованием интерфейса командной строки и использования интерфейса командной строки для создания НОВОГО приложения angular. На самом деле мне не нужен новый проект или мне нужно реорганизовывать все, что я создал, чтобы предоставить услугу отдельному проекту пользовательского интерфейса. Я просто хочу дополнить свое приложение некоторыми дополнительными возможностями пользовательского интерфейса на стороне клиента.

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

Обновлять

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

Visual Studio 2017 (*.csproj)

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

  • Asp.Net Core 1.X + Angular (версии 2.0 ~ 4.0)

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

Visual Studio 2015 (project.json)

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

    • Asp.Net Core 1.X + Angular (версии 2.0 ~ 4.0)

      • Asp.Net Core Template Pack
      • Примечание: я бы не одобрил плохой плагин VS, Мэдс Кристенсен делает хорошую работу.
      • Сведения о конфигурации и настройке: сообщение в блоге

    • Asp.Net Core 1.X + AngularJS (~ 1.5)

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

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


angular c# visual-studio-2017 asp.net-core-1.1
person Adam Vincent    schedule 21.06.2017    source источник

Ответы (5)


arrow_upward
6
arrow_downward

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

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

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

person dee zg    schedule 21.06.2017
comment
Играя здесь в адвоката дьявола ... но разве сам ASP.NET не является слоем пользовательского интерфейса? Я, конечно, не обрабатываю там свою бизнес-логику. Я не вижу преимущества абстрагирования от функциональности ASP.NET. Проверка на стороне сервера и на стороне клиента может и должна сосуществовать на одном уровне. - person Adam Vincent; 21.06.2017
comment
ну, собственно говоря, нет. asp.net также может быть веб-API, чистым REST. если вы делаете сайт asp.net для пользовательского интерфейса (например, бритву или что-то в этом роде), вам не нужен angular, поскольку это не спа. с другой стороны, если вы используете angular, вам не нужна бритва, а asp.net web api REST для передачи данных в ваш угловой клиент. - person dee zg; 21.06.2017
comment
По сути, в описанном мной сценарии, где я использую Asp.Net MVC / Razor, Angular не является подходящей технологией. Я верю, сэр, вы попали в самую точку. Как вы думаете, что было бы правильным выбором? Похоже, что ReactJS лучше подходит для того, что мне нужно. - person Adam Vincent; 21.06.2017
comment
нет, нет, здесь ReactJS находится в той же строке, что и angular, потому что они оба: SPA (одностраничные приложения). Я хочу сказать, что если вы используете технологию SPA (независимо от того, ract, angular или что-то еще), то вам, очевидно, не нужна бритва. И наоборот. Выбор: либо razor (без angular, react и т. Д.), Либо asp.net web api + SPA (react, angular или какой-то другой [из которых я бы рекомендовал angular, но это личное предпочтение]). надеюсь, что это проливает немного света на эту тему. - person dee zg; 21.06.2017
comment
Понятно. Надеюсь. Если вы хотите подвести итог в ответе, я бы принял это. Я думаю, что либо используйте MVC с Razor, либо используйте Angular в качестве SPA, и если вы используете Angular, используйте Angular CLI - лучший ответ, чем пытаться возиться с Angular, пытаясь заставить его делать то, для чего он не предназначен в моем применение. - person Adam Vincent; 21.06.2017
comment
Хорошо, что я прочитал это, хотя я уже знаю, что это лучший подход, чем собирать все вместе в основном проекте ASP.net. Еще одна вещь, с которой вам придется столкнуться при этом, - это настройка CORS для вашего приложения. - person Sonny Recio; 11.09.2017
comment
Я слышу то, что здесь пытается сказать Адам, но я также вижу практическую сторону того, что предлагает dee zg. Я считаю разумным использовать AngularJS в качестве языка структурированных сценариев с ASP.NET Razor. Я использую его таким образом, чтобы обеспечить безопасность на стороне сервера, а данные загружаются на стороне клиента со всеми богатыми функциями на стороне клиента. - person Sam; 26.01.2018
comment
@AdamVincent: Я думаю, вы танцуете вокруг того факта, что ни один из подходов не хорош, и это вселяет в Blazor надежду на будущее. blazor.net - person Patrick Szalapski; 16.05.2018

arrow_upward
2
arrow_downward

Я понимаю, насколько это сбивает с толку, но dee zg правильно. Вам понадобятся два отдельных проекта. Один из них будет API-интерфейсом ядра .NET (REST), а другой - спа-центром Angular 2. Будет полное разделение.

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

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

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

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

person DJDJ    schedule 23.06.2017

arrow_upward
1
arrow_downward

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

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

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

person Anton    schedule 09.08.2017
comment
Привет Антон! Я вижу, что вы недавно удалили некоторые из ваших ответов сообществом, потому что они были не более чем ссылками на сторонний контент. Я рад видеть, что вы сейчас решили эту проблему. Этот ответ намного лучше, потому что он содержит важные части в самом ответе. К сожалению, у меня есть еще одна мелочь. :-) Глядя на связанную страницу, кажется, что это что-то, что вы опубликовали или являетесь аффилированным лицом. Поскольку вы не раскрывали свою принадлежность, сообщество отметило это как спам. - person Cody Gray; 09.08.2017
comment
Я отклонил этот флаг и отредактировал требуемый отказ от ответственности, потому что это действительно похоже на искреннюю попытку внести свой вклад. Однако постарайтесь помнить об этом в будущем. У нас есть соответствующая страница в нашем Справочном центре, которую вам, вероятно, стоит прочитать. Всего наилучшего! - person Cody Gray; 09.08.2017
comment
Спасибо, Коди! И приносим извинения за неудобства. Будет лучше в следующий раз. - person Anton; 10.08.2017
comment
Спасибо за ответ Антон. Во время ОП информации об этом было мало или вообще не было. С некоторой помощью других ответов и некоторого возни я в значительной степени придумал то же решение. Действительно передовой край. - person Adam Vincent; 11.08.2017

arrow_upward
0
arrow_downward

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

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

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

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

person Sathya    schedule 16.11.2017

arrow_upward
0
arrow_downward

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

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

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

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

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

  2. Выполните команду:

    ng generate component имя-компонента-в нижнем регистре

Это создаст файлы .html, .spec.ts, .ts, .css и обновит app.module.ts.

СОЗДАТЬ НОВУЮ УСЛУГУ:

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

  2. Выполните команду:

     ng generate service _component-name-with-lowercase_

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

person Judyll    schedule 27.09.2018
comment
Привет, спасибо, что поделились @Judyll. Этот вопрос и принятый ответ, безусловно, устарели. В вашем предложении есть один серьезный недостаток. Просто создать приложение Angular 6 внутри папки VS Project недостаточно. Я настоятельно рекомендую проверить текущий шаблон .NET Core SPA, который был обновлен и работает довольно хорошо по сравнению с .NET Core год назад docs.microsoft.com/en-us/aspnet/core/client-side/spa / - person Adam Vincent; 27.09.2018
comment
Спасибо @AdamVincent за предложения. По моему личному опыту, я пока не обнаружил серьезных недостатков, но я прочту предложенную вами документацию по использованию шаблонов .NET CORE SPA и посмотрю, что смогу найти. Еще раз спасибо! - person Judyll; 28.09.2018
comment
В шаблоны SPA включен также стандартный код, который сообщает .NET, что теперь он отвечает за обработку SPA, например, app.UseSpa() также, вы, вероятно, также захотите сообщить VS2017 / VS Code, как упаковать ваше угловое приложение в .NET Core. приложение (обычно через средство запуска задач, такое как Grunt / Gulp или Webpack и т. д.) - person Adam Vincent; 28.09.2018