web-dev-qa-db-ja.com

Angular 4およびAngular CLIを使用してVisual Studio 2017を実行する

Visual Studio 2017でAngular CLI生成プロジェクトを実行できますか？

Hello Worldアプリケーションを生成しようとしましたが、Visual Studio 2017で実行できません。

ng new HelloWorld

フォルダーをWebサイトとして開き、開始をクリックしました。他の誰かがこれを解決しましたか？

「読み込み中...」は永久に実行されます。

angularvisual-studio-2017angular-cli
24
Greg Finzer

答えはいいえ、VSはAngular CLIプロジェクトを実行できません。 Angular CLIアプリケーションには、プロジェクトの処理方法をVSに指示する.*projファイルがありません。それがなければ、VSは単なるコードエディターです。

Angular 4アプリケーションを開発/デバッグする場合は、VS以外の別のIDEを検討することをお勧めします。 VS Code を使用します。これを使用すると、F5キーを押してAngular CLIアプリケーションのデバッグを簡単に開始できます。開発中にアプリケーションを実行するには、引き続きCLIからng serveが必要です。

VS 2017を使用してAngular開発を行う場合は、VSで利用可能な SPA Templates をご覧ください。

これらは、ASP.Net Core MVCとAngular 4.の組み合わせです。これらはそれほど悪くはありません。しかし、Microsoftのやり方が少し混ざっています。つまり、テンプレートはAngularの慣習であることがわかっているものに従う必要はありません。彼らはマイクロソフトになっています。それを乗り越えることができれば、これらは良いことです。

私は彼らと遊んでみましたが、正直に言って、彼らは何かを素早く立ち上げて実行するためにうまく機能していると言えます。 VSがIDEの選択肢である場合、それは素晴らしいことです。もちろん、Angular CLIはこれらと一緒に使用できません。少なくとも、私はそれを試していないし、おそらく試していないだろう。

これがお役に立てば幸いです。

更新（2017-08-17）

Visual Studio 2017 15.3には、通常のWebアプリケーション.NET CoreプロジェクトテンプレートとしてAngularテンプレートが組み込まれています。 ReactおよびReact/Reduxテンプレートも含まれています。テンプレートを選択肢として表示するには、[新規ASP.NETコアアプリケーション]ダイアログでASP.NET Core 2.0を選択する必要があります。 1.1以下を選択した場合、テンプレートはオプションのリストに表示されません。

更新（2018-02-23）

Microsoftは、ASP.NET Core 2.0アプリケーションで使用するいくつかの新しいテンプレートを提供しています。あなたはそれらについての詳細を見つけることができます こちら 。新しい Angularテンプレート には、 Angular CLI のサポートが含まれています。したがって、CLIに精通している場合、これはもう少し家のように感じるはずです。つまり、 ng g コマンドを使用して、この新しいテンプレートでコードを生成できます。 SSR はまだテンプレートの一部ですが、機能させるために少しコーディングする必要がありますが、大したことではありません。

更新（2018-08-28）

この回答に対するコメントで指摘されているように、このアップデートの時点で、ASP.NET Core AngularテンプレートはAngular 5（5.2.0、正確に）。 Angular CLIバージョン6以降で利用可能な ng update コマンドを使用して、ClientApp（Angularソリューションの一部）ASPテンプレートがバージョン5から6にビルドする。これを機能させるには、Angular CLIバージョン6をマシンにグローバルにインストールする必要があります（npm i -g @angular/cli）。

テンプレートリポジトリの commits に基づいて、MSがAngular 6.のサポートを追加したことを知っています。それが広く利用可能になる時期は私にはわかりません。それが出てきたら、将来のアップデートを探してください！

45
R. Richards

はい、Visual Studio 2017でAngular CLI生成プロジェクトを実行できます。ただし、Angularアプリを提供するAsp.Net Webアプリに含める必要があります。次の手順を使用できます。

  1. VSプロジェクト（たとえば、「AngularApp」）を作成します。 「Asp.Net Core Web Application」および「Empty」テンプレートを選択します。

  2. .csprojファイルの<PropertyGroup>に次を追加します。これにより、VSはTypeScriptをトランスコンパイルしません。 （angular-cliを使用します）。

    < TypeScriptCompileBlocked > true < /TypeScriptCompileBlocked >

  3. 親フォルダーでAngularAppのコマンドプロンプトを開き、angular-cliを使用してアプリを作成します。

    ng new AngularApp

  4. .angular-cli.jsonを編集し、「outDir」を「dist」から「wwwroot」に変更します。これは、Webアプリが期待する場所です。

  5. Startup.csを編集し、「app.Run…」を置き換えます。方法：

    app.UseDefaultFiles();
app.UseStaticFiles();

  6. Task Runner Explorerで、カスタムビルドタスク（ngビルド）を「ビルド後」イベントにバインドします。

  7. アプリをビルドして実行します。

10
John Pankowicz

Steve SandersonはCLIをDotNet Angularテンプレートに統合する作業を行っているようです。 新しい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

9
Mike Lunn

これらの手順に従って、Visual Studio 2017で新しい最新リリースAngularアプリケーションを作成できます。開始する前に、node.jsとnpmをマシンとシステムパスにインストールする必要があります。

  1. Visual Studio 2017で、これらの設定を使用して新しいASP.NET Core Webアプリケーションを作成します。 New ASP.NET Core Web Application
  2. 作成後、プロジェクトの名前を右クリックし、[プロジェクトのアンロード]を選択します。
  3. プロジェクトの名前を右クリックして、プロジェクトを編集するオプションを選択します。
  4. </ 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>
  1. プロジェクトの名前を右クリックして、[プロジェクトのリロード]を選択します。変更を保存します。
  2. プロジェクトで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();
}

  1. プロジェクトディレクトリでCMDプロンプトを開きます。

  2. タイプnpm install -g @angular/cli

  3. ng new <name> --directory ClientAppと入力し、Angularアプリケーションの構成方法に関する質問に答えます。 <name>をAngularアプリケーションの名前に変更します。

  4. Visual Studio 2017で、ファイル\ ClientApp\angular.jsonを編集します。 outputPathを含む行を検索し、"outputPath": "../wwwroot",に変更します。

  5. Visual Studio 2017で、ファイル\ ClientApp\tsconfig.jsonを編集します。 outDirを含む行を検索し、"outDir": "../wwwroot/out-tsc",に変更します。

この時点で、Visual Studio 2017でAngularアプリケーションを実行およびデバッグできます。注意すべき点は、ClientAppフォルダー内のすべてのファイルのビルドアクションがなしであることです。つまり、これらを編集しても、Visual Studioは変更を検出せず、次回実行時に再構築します。これを修正するには、各ファイルに応じてビルドアクションを変更します。

インポートする既存のAngularアプリケーションがある場合は、手順8および9をスキップし、代わりに、プロジェクトのルートにあるClientAppというフォルダーにアプリケーションをコピーします。

2
Wayne Allen

AngularにVS 2017テンプレートを使用しているのか、VSでWebサイトとしてAngular CLIプロジェクトを開いているのかが明確ではありません。

NPMとAngular CLIで作成されたAngular 6アプリケーションに取り組んでいます

常にVSで開き、そこでコードを作成しますが、常にコマンドプロンプトから実行します。

コマンドプロンプトを開き、プロジェクトディレクトリに移動してコマンドを実行します

ng serve -o
1
Ali Adravi

2017年にangular cliスクリプトを実行することは間違いなく可能です。したがって、プロジェクトの実行は非常に簡単です。ただし、Visual Studioはまだプロジェクトを実行していません。 Visual Studioから開始するだけです。

これを行う方法の1つは、package.jsonにスクリプトコマンドを追加することです

例えば：

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

実際、これらのスクリプトは、プロジェクトがangular CLIによって生成されるときにデフォルトで追加されます。

次に、スクリプトの呼び出しは、Node.jsインタラクティブウィンドウからの.npm [ProjectName] run-script buildまたはプロジェクトを実行する.npm [ProjectName] run-script startのように簡単です。

1
LeRoi

Visual StudioでAngular CLIベースのテンプレートを実行するには、複数のソリューションがあります。

  1. これ は1つのアプローチです。これは、新しいangular CLIテンプレートを使用しません。代わりに、プロキシ構成を使用し、プロジェクトでMVCとAngularフォルダーを混合します。

  2. これ は別のアプローチです。これはほぼ1番目のアプローチと同じですが、ステップとスクリーンショットでより詳細になっています。

  3. .Netコア2.1を使用Visual StudioでAngularプロジェクトを作成するための新しいCLIベースのテンプレートがあります。詳細 こちら

0
Venkatesh Muniyandi

インストールする場合は、nugetパッケージマネージャーで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'

Visual Studio 2017/2015でAngular4プロジェクトを作成するのに役立ちます。

0
Manoj Maharana

TypeScriptプロジェクトタイプを使用する必要があります。webpackを使用する場合は、組み込みのVisual Studioタイプスクリプトのコンパイルを無効にします。

次に、 "ng new"コマンドでangular cliが生成したディレクトリ全体をTypeScriptプロジェクトのルートにコピーする必要があります。

これで、インテリセンスと開発に必要なすべてのものが手に入りました。個人的には、powershellスタンドアロンWindowsアプリケーション内でcliを使用することを好みますが、パッケージマネージャーコンソールはまったく同じpowershellなので、ユーザー次第です

0
Francesco Venturini