Запуск Visual Studio 2017 с угловым 4 и угловым CLI

Можно ли запустить проект Visual Studio 2017 с угловым CLI?

Я попытался создать приложение Hello World, и Visual Studio 2017 не может его запустить.

ng new HelloWorld

Я открыл папку в качестве веб-сайта и нажал кнопку "Пуск". Кто-нибудь еще решил это?

"Загрузка..." работает навсегда.

Ответ 1

Ответ - нет, VS не может запустить проект Angular CLI. В приложении Angular CLI нет файла .*proj, который бы сообщал VS, что делать с проектом. Без этого VS - просто редактор кода.

Если вы хотите разработать/отладить приложение Angular 4, то вы можете рассмотреть возможность использования другой IDE, отличной от VS. Я использую VS Code. С его помощью вы можете нажать клавишу F5, чтобы начать отладку приложения Angular CLI без особых усилий. Вам все еще нужен ng serve из CLI для запуска приложения во время разработки.

Теперь, если вы действительно хотите использовать VS 2017 для разработки на Angular, вы можете взглянуть на шаблоны SPA, доступные для VS.

Это смесь ASP.Net Core MVC и Angular 4. Они не так уж и плохи. Но в них есть что-то вроде Microsoft. То, что я имею в виду, это то, что шаблоны не обязательно следуют так называемым угловым соглашениям; они были под управлением Microsoft. Если вы можете пройти через это, тогда это может быть хорошо.

Я поиграл с ними, и я могу честно сказать, что они хорошо работают, чтобы что-то запустить и быстро запустить. Если VS ваш выбор IDE, это может быть хорошо. Конечно, Angular CLI не может использоваться с ними. По крайней мере, я этого не пробовал и, вероятно, не стал бы.

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

ОБНОВЛЕНИЕ (2017-08-17)

Visual Studio 2017 15.3 теперь имеет шаблон Angular, встроенный в шаблон обычного веб-приложения .NET Core. Шаблоны React и React/Redux также включены. Вы должны выбрать ASP.NET Core 2.0 в диалоговом окне "Новое приложение ASP.NET Core", чтобы увидеть шаблоны в качестве выбора. Если вы выберете 1.1 или ниже, шаблоны не будут отображаться в списке параметров.

ОБНОВЛЕНИЕ (2018-02-23)

Microsoft предоставила несколько новых шаблонов для использования с приложениями ASP.NET Core 2.0. Вы можете найти более подробную информацию о них здесь. Новый angular шаблон включает поддержку angular интерфейса командной строки. Так что, если вы знакомы с CLI, то это должно быть немного похоже на дом. Это означает, что вы можете использовать команды ng g для генерации кода с помощью этого нового шаблона. SSR по-прежнему является частью шаблона, хотя для того, чтобы он заработал, нужно немного поработать, а не так уж и много.

ОБНОВЛЕНИЕ (2018-08-28)

Как указано в комментарии к этому ответу, на момент данного обновления шаблон ASP.NET Core Angular по-прежнему создает проект с Angular 5 (точнее 5.2.0). Я успешно использовал команду ng update, доступную в версии Angular CLI 6+, чтобы обновить ClientApp (угловая часть решения), которую шаблон ASP строит с версии 5 до 6. Для этого Для работы вам потребуется глобальная установка Angular CLI версии 6 на вашем компьютере (npm i -g @angular/cli).

На основании коммитов в хранилище шаблонов я знаю, что MS добавила поддержку Angular 6. Когда это станет широко доступно, мне неизвестно. Ищите будущее обновление, когда оно выйдет!

ОБНОВЛЕНИЕ (2019-10-03)

VS 2019 с последними обновлениями (v16.3.2) теперь включает Angular 8.0.0 в шаблоне Angular. Он также включает .NET Core 3.0 SDK.

Ответ 2

Да, вы можете запустить проект с угловым CLI в Visual Studio 2017. Но его нужно добавить в веб-приложение Asp.Net, которое будет обслуживать приложение "Угловое". Вы можете использовать следующие шаги:

Создайте проект VS (например, "AngularApp"). Выберите "Основы веб-приложений Asp.Net" и "Пустой".
Добавьте следующее в <PropertyGroup> в файле.csproj. Это держит VS от транспиляции вашего машинописного текста. (мы будем использовать угловые-cli).
```
< TypeScriptCompileBlocked > true < /TypeScriptCompileBlocked >
```
Откройте командную строку в родительской папке в AngularApp и создайте приложение с помощью углового кли.
```
ng new AngularApp
```
Измените.angular-cli.json и измените "outDir" с "dist" на "wwwroot". Вот где это ожидает веб-приложение.
Измените startup.cs и замените "app.Run...". метод с:
```
app.UseDefaultFiles();
app.UseStaticFiles();
```
В Проводнике Run Runner свяжите задачу Custom build (сборка ng) с событием "После сборки".
Создайте и запустите приложение.

Ответ 3

Похоже, Стив Сэндерсон работает над интеграцией CLI в шаблон DotNet Angular. Добавить новый шаблон с угловым CLI

Проверьте это репо Angular-CSharp

Это промежуточное ПО от репо меня не возбуждает.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.DefaultPage = "/dist/index.html";
                spa.Options.SourcePath = "ClientApp";

                /*
                // If you want to enable server-side rendering (SSR),
                // [1] In AngularSpa.csproj, change the <BuildServerSideRenderer> property
                //     value to 'true', so that the SSR bundle is built during publish
                // [2] Uncomment this code block
                spa.UseSpaPrerendering(options =>
                {
                    options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
                    options.BootModuleBuilder = env.IsDevelopment() ? new AngularCliBuilder(npmScript: "build:ssr") : null;
                    options.ExcludeUrls = new[] { "/sockjs-node" };
                });
                */

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });
        }

Отличная работа Стив! Надеюсь, он скоро будет готов.

Обновление: похоже, имеется предварительный просмотр: Microsoft.DotNet.Web.Spa.ProjectTemplates :: 2.0.0-preview1-final

Ответ 4

Вы можете выполнить следующие шаги, чтобы создать новое приложение Angular последнего выпуска в Visual Studio 2017. Перед началом работы на компьютере и в системном пути должны быть установлены node.js и npm.

В Visual Studio 2017 создайте новое базовое веб-приложение ASP.NET с этими параметрами.
После создания щелкните правой кнопкой мыши на названии вашего проекта и выберите Unload Project.
Щелкните правой кнопкой мыши по названию вашего проекта и выберите опцию для редактирования проекта.
Добавьте следующее перед закрывающим тегом </Project>.

<Target Name="Build Angular" Condition="'$(Configuration)' != 'Release'" BeforeTargets="Build">
  <Message Text="Angular Build In Progress" Importance="high" />
  <Exec Command="ng build" WorkingDirectory="ClientApp" />
</Target>

Щелкните правой кнопкой мыши по названию вашего проекта и выберите "Обновить проект". Сохраните ваши изменения.
Откройте файл Startup.cs в проекте и измените метод Configure следующим образом.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.Use(async (context, next) =>
    {
        await next();
        context.Request.Path = "/index.html";
        await next();
    });

    app.UseStaticFiles();
}

Откройте приглашение CMD в каталоге вашего проекта.
Введите npm install -g @angular/cli
Введите ng new <name> --directory ClientApp и ответьте на вопросы о том, как вы хотите настроить приложение Angular. Измените <name> на имя вашего приложения Angular.
В Visual Studio 2017 отредактируйте файл \ClientApp\angular.json. Найдите строку, содержащую outputPath и измените ее на "outputPath": "../wwwroot",
В Visual Studio 2017 отредактируйте файл \ClientApp\tsconfig.json. Найдите строку, содержащую outDir и измените ее на "outDir": "../wwwroot/out-tsc",

На этом этапе вы сможете запускать и отлаживать приложение Angular в Visual Studio 2017. Следует отметить, что все файлы в вашей папке ClientApp имеют действие "Нет". Это означает, что если вы отредактируете их, Visual Studio не обнаружит изменения и не перестроит их при следующем запуске. Чтобы исправить это, измените Build Action в соответствии с каждым файлом.

Если у вас есть приложение Angular, которое вы хотите импортировать, пропустите шаги 8 и 9 и вместо этого скопируйте ваше приложение в папку с именем ClientApp в корневом каталоге вашего проекта.

Ответ 5

Запуск угловых кли-скриптов в 2017 году определенно возможен. Поэтому запуск проекта довольно прост. Однако визуальная студия все еще не запускает проект. Вы только начинаете его с визуальной студии.

Один из способов, которым я знаю, заключается в том, чтобы добавить команды сценария в ваш package.json

например:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
}

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

Тогда вызов сценария прост, как .npm [ProjectName] run-script build из окна Node.js Interactive или .npm [ProjectName] run-script start запуска проекта.

Ответ 6

Неясно, используете ли вы шаблон VS 2017 для Angular или вы просто открываете проект Angular CLI в VS в качестве веб-сайта.

Я работаю над программой Angular 6, созданной с помощью NPM и Angular CLI

Всегда открывайте его в VS и код там, но всегда запускайте из командной строки.

Откройте командную строку и перейдите в каталог проекта и выполните команду

ng serve -o

Ответ 7

Вы должны использовать тип проекта Typcript, и, если вы используете webpack, отключите встроенную сборку скриптов типа Visual Studio.

Затем вы должны скопировать в корень вашего проекта машинописного текста весь скопированный каталог cli с помощью команды "ng new".

Теперь у вас есть intellisense и все, что вам нужно для развития. Лично я предпочитаю использовать приложение cli внутри автономного окна powershell, но консоль диспетчера пакетов является той же самой, что и для вас.

Ответ 8

Если вы хотите установить, вы можете использовать Install-Package Angular4 -Version 1.1.0 в менеджере Install-Package Angular4 -Version 1.1.0 и выполните следующие действия:

Angular 4
*********

Prerequisites
'''''''''''''
1. Download and Install Node js
2. Install Visual studio 2015 update 3 or above
3. Download and Install TypeScript 2.6.1 for Visual Studio 2015 (https://www.typescriptlang.org/#download-links)

Follow the steps to install package.
''''''''''''''''''''''''''''''''''''
1. Create an new project with empty template and include dependencies for MVC and WebApi to the project
2. Install the package using command 'Install-Package Angular4 -Version 1.1.0'

Follow the steps after package installation
'''''''''''''''''''''''''''''''''''''''''''
1. Open Node.js Command Prompt
2. Navigate to project location(use commands such as pushd,cd etc)
3. Run the command 'npm install'

Это может помочь вам создать проект Angular4 на Visual studio 2017/2015.

Ответ 9

В Visual Studio существует несколько решений для запуска шаблона на основе Angular CLI.

Это один из подходов. Это не использует новый угловой шаблон CLI. Вместо этого он использует настройку прокси и смешивает MVC и угловые папки в проекте.
Это другой подход. Он почти имеет тот же подход, что и # 1, но более подробно с шагами и скриншотами.
С.Net core 2.1 Существуют новые шаблоны на основе CLI для создания угловых проектов в Visual Studio. Больше информации здесь