Как правильно настроить новый проект Angular 6 - PullRequest
0 голосов
/ 24 мая 2018

На пути к изучению Angular я столкнулся с двумя разными способами создания нового проекта Angular.

Первый использует команду Angular CLI:

ng new app-name-here

Второй использует команду:

dotnet new angular app-name-here

Сгенерированные проекты кажутся очень разными, и естьмного деталей для меня, чтобы покрыть.В чем разница между двумя подходами?Каковы плюсы и минусы для каждого подхода, когда цель состоит в том, чтобы создать клиентское приложение, которое будет взаимодействовать с данным API ядра ASP.Net?

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

Edit (31 / MAY / 2018)

Сегодня я создал шаблон проекта DotNet, который должен облегчить эти шаги для всех.Вы можете попробовать это здесь:

AspNetCore2Ang6 Шаблон: https://github.com/JuanGarciaCarmona/AspNetCore2Ang6Template

END Edit (31 / MAY / 2018)

На второй вопрос:

Каковы плюсы и минусы для каждого подхода, когда целью является создание клиентского приложения, которое будет взаимодействовать с данным API ядра ASP.Net?

ИМХО лучший выбор - иметь оба в одном проекте, потому что вы можете развернуть и обслуживать клиентскую часть (угловую) и API (контроллеры ASP NET Core Web API) из одного проекта, что хорошо на стадии разработки и облегчаетразвертывание.Чтобы достичь этого, лучший выбор - совместить оба механизма, вы можете создать проект dotnet и поместить в него место, в которое также вставил угловой код, добавить и использовать MVC для вашего приложения и обслуживать угловое приложение.

Самый простой рецептсделать это:

  1. Создать проект dotnet (пустое основное веб-приложение ASP NET) и назвать его XXXXXX, что можно сделать из Visual Studio или из командной строки формы («dotnet new web»)
  2. Затем из командной строки перейдите в папку prevous и введите ng new XXXXXX, эта команда поместит все необходимое в ранее созданную папку проекта dotnet.
  3. Как только она закончится, перейдитев angular.cli и установите для вывода значение «wwwroot» (вместо «dist / XXXXXX» 4.- Ваш класс запуска должен выглядеть так:

    public class Startup
    {
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }
    
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
    
        app.UseMvc();
    
        app.UseDefaultFiles();
        app.UseStaticFiles();
    

    }}

И затем вы можете запустить его, используя dotnet run или ng serve, обе команды работают.

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

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

Хуан

Редактировать (26 мая / 2018)

ОтносительноПерезагрузка в реальном времени не позволила мне достичь этой цели путем отладки из VS или запуска приложения с помощью dotnet, но для проверки стилей и небольшой, но сложной настройки я запустил веб-приложение с «ng serve».

Если вам нужны и клиент, и сервер, работающий и работающий, потому что вам нужно вызывать ваши контроллеры API из вашего клиентского приложения, тогда вы можете поиграть с environment.ts, настраивая ваш базовый URL API и в это время запустить вашбэкэнд от VS и ваш интерфейс с NG служить.надеюсь, это будет решено или исправлено в будущих версиях VS или, как я видел, было запрошено, в более новых шаблонах SPA ядра asp net, подготовленных для Angular 6

0 голосов
/ 25 июня 2018

Шаблон, используемый dotnet new angular, взят из Microsoft .

Это замороженный во времени шаблон, который имеет очевидный недостаток: он всегда устарел, поскольку Angular меняет ВСЕВРЕМЯ.

Часто вы можете просто сказать ng update и / или следовать Angular Update Guide , чтобы получать последние обновления.Однако после крупных релизов это более серьезная проблема - сейчас шаблон использует Angular 5, а Angular 6 - самый последний.

Шаблон имеет некоторые преимущества и недостатки:

Преимущества

  • Вы знаете, что он будет работать «из коробки», и это хорошее начало для «детской площадки»project.
  • Включает загрузчик и более удобный образец, чем угловой ng new.
  • Он также включает пример кода WebAPI (который отличается от кода Angular), так что вы можете быстро добавить новый APIконтроллеры.

Недостатки

  • Иногда Angular вносит ОСНОВНЫЕ изменения между обновлениями.Версия 5-6 - такой пример, где .angular-cli.json теперь angular.json и совершенно другой формат.Если вы новичок в angular, это только увеличивает общую головную боль.
  • ng update, кажется, никогда не работает для меня очень надежно.Ознакомьтесь также с руководством по обновлению Angular.
  • Возможно, вы не захотите, чтобы включался загрузочный css.
  • Если у вас уже есть проект Angular, вы хотите использовать dotnet-ify, он не делает этого дляВы легко сами по себе.

Из-за серьезных изменений с 5> 6 я рекомендую не использовать этот шаблон прямо сейчас, за исключением случайного тестирования. .

ДляЯ нашел, что лучше всего сделать следующее:

  • Запустить dotnet new angular или dotnet new angular -o projectname, чтобы поместить его в подкаталог.Это позволяет настроить шаблон Spa, чтобы соединить мир dotnet с угловым миром.
  • Полностью стереть содержимое папки ClientApp, созданной для вас, или переименовать ее, чтобы вы могли обратиться к образцу кода, еслиновенький для Angular
  • CD в папку ClientApp
  • Используйте Angular CLI (отдельно от Angular Team) и запустите ng new --help, чтобы увидеть все доступные опции
  • Создайте свое угловое приложение.Вот параметры, которые я использую:

ng new sjw_website --routing --style=scss -prefix=sjw

Префикс - это то, с чего начинаются элементы пользовательского компонента (например, «имя» - это созданная папка (которая будетвнутри ClientApp)

  • Запустите приложение Angular, используя npm start, которое запускает его на порту 4200 (запустите его из новой папки в ClientApp/sjw_website). Вы можете просмотреть это сразу по http://localhost:4200, который полностью отделен от dotnet и работает на собственном сервере Angular.
  • Измените шаблон SPA в startup.cs, чтобы использовать эту строку кода spa.UseProxyToSpaDevelopmentServer("http://localhost:4200"); Это приведет к запросам прокси кугловой сервер.
  • Измените startup.cs так, чтобы он указывал на ClientApp/sjw_website (или переместите файлы вручную на уровень выше)
  • Откройте вторую powershell для сборки и запуска (в папкесодержащий ваш проект dotnet)
  • Сборка dotnet build и запуск dotnet run
  • В качестве альтернативы используйте dotnet watch run

Обратите внимание, что угловой проект, который выполняется подсервер разработки angular ng serve автоматически перезапустится, когда выКе изменения в угловых файлах.При использовании dotnet watch сервер dotnet будет перезагружаться при внесении изменений в файлы dotnet.

Лучше всего работать с обоими открытыми файлами, желательно на втором мониторе.

Обратите внимание, что когда вы делаетепроизводственная сборка - это команда npm build, встроенная в файл csproj, которая выполняет магию и направляет вывод в папку dist.

0 голосов
/ 24 мая 2018

ng new

Создает новый угловой проект с использованием CLI.Он не создаст любого необходимого внутреннего кода / проектов

dotnet new angular

Создает новый базовый проект .NET на основеMS предоставил шаблон.Он также создает (большинство?) Файлов, которые вам понадобятся для угловой части.Поскольку вы хотите серверную часть ASP.NET Core, я бы пошел по этому пути, если бы я хотел решения с одной командой.Я не использовал его сам, поэтому ваш пробег может варьироваться.

Руководство

Вы всегда можете создать проект ASP.NET Core WebAPI в Visual Studio, а затем ng new приложение внутри это.Это маршрут, который я обычно выбираю.

...