web-dev-qa-db-ja.com

新しいAngular 6プロジェクトを適切にセットアップする方法

Angularを学習する途中で、新しいAngularプロジェクトを作成する2つの異なる方法に出会いました。

1つは、Angular CLIコマンドを使用することです。

ng new app-name-here

2番目は、次のコマンドを使用しています。

dotnet new angular app-name-here

生成されたプロジェクトは非常に異なっているように見え、私がカバーすべき多くの部分があります。 2つのアプローチの違いは何ですか？特定のASP.Net Core APIと通信するクライアントアプリを構築することが目標である場合、各アプローチの長所と短所は何ですか？

angularasp.net-core.net-coreangular-cli
9
Tech Tech

ng new

CLIを使用して新しいangularプロジェクトを作成します。必要なバックエンドコード/プロジェクトのanyは作成しません

ドットネット新角度

MS提供のテンプレートに基づいて、新しい.NETコアプロジェクトを作成します。また、Angular部分に必要なファイルの（ほとんど？）を作成します。ASP.NETCoreバックエンドが必要なため、1つのコマンドソリューションが必要な場合はこのルートを使用します。私は自分で使ったことがないので、あなたの走行距離はさまざまです。

マニュアル

Visual StudioでいつでもASP.NET Core WebAPIプロジェクトを作成してから、ng newアプリケーション内部 it。これは私が通常取るルートです。

10
BradleyDotNET

_dotnet new angular_で使用されるテンプレートは、 Microsoft に由来します。

これはフリーズインタイムテンプレートです。これには、Angularが常に変更されているため、常に最新ではないという明らかな欠点があります。

多くの場合、_ng update_と言うだけで、かつ/または Angular Update Guide に従って最新の更新を取得できます。ただし、メジャーリリースの後、これはより大きな問題になります。現在、テンプレートはAngular 5およびAngular 6が最新です。

このテンプレートには、いくつかの利点と欠点があります。

長所

  • あなたはそれが箱から出して動作することを知っています、そしてそれは「遊び場」プロジェクトの良いスタートです。
  • これには、bootstrapと、angular _ng new_。
  • WebAPIサンプルコード（Angularコードとは異なります）も含まれているため、新しいAPIコントローラーをすばやく追加できます。

短所

  • 時々Angularは更新の間に大きな変更を行います。バージョン5-6は、_.angular-cli.json_が_angular.json_であり、完全に異なる形式であるような例です。 angularこれは全体的な頭痛の種を増やすだけです。
  • _ng update_は、私にとって非常に確実に機能することはありません。 Angular=アップグレードガイドもご覧ください。
  • bootstrap cssが含まれていることを望まないかもしれません。
  • 既にAngularプロジェクトをドットネット化したい場合は、それだけでは簡単にそれを行いません。

5> 6からの大きな変更のため、カジュアルなテストを除いて、このテンプレートを今すぐ使用しないことをお勧めします。。

私にとって最善の方法は、次の手順に従うことです。

  • _dotnet new angular_または_dotnet new angular -o projectname_を実行して、サブディレクトリに配置します。これにより、ドットネットワールドをangular world。
  • 作成したClientAppフォルダーの内容を完全に消去するか、Angularを初めて使用する場合にサンプルコードを参照できるように名前を変更します
  • ClientAppフォルダーへのCD
  • Angular CLI （angular team）からの個別インストール）を使用し、_ng new --help_を実行して、使用可能なすべてのオプションを表示します
  • angularアプリを作成します。これらは私が使用するオプションです：

_ng new sjw_website --routing --style=scss -prefix=sjw_

プレフィックスは、カスタムコンポーネント要素が始まるものです（たとえば、「名前」は作成されたフォルダー（ClientApp内にあります）

  • ポート4200で起動する_npm start_を使用してAngularアプリを実行します（これを_ClientApp/sjw_website_の新しいフォルダーから実行します。これはすぐに表示できます http：// localhost：42 これは、dotnetとは完全に分離されており、Angular独自のサーバーで実行されています。
  • _startup.cs_の SPAテンプレート を変更して、次のコード行を使用しますspa.UseProxyToSpaDevelopmentServer("http://localhost:4200");これは、angularサーバーへのリクエストをプロキシします。
  • _startup.cs_を変更して_ClientApp/sjw_website_を指すようにします（またはファイルを手動でレベルを上げます）
  • 2番目のpowershellを開いて、ビルドして実行します（dotnetプロジェクトを含むフォルダー内）
  • _dotnet build_をビルドし、_dotnet run_を実行します
  • または、_dotnet watch run_を使用します

angular _ng serve_開発サーバーで実行されているangularプロジェクトは、angular files。_dotnet watch_を使用する場合、dotnetファイルに変更を加えると、dotnetサーバーが再起動します。

両方を開いておくと、できれば2台目のモニターで開くのが最適です。

プロダクションビルドを行う場合、csprojファイルに埋め込まれた_npm build_コマンドが魔法を行い、出力をdistフォルダーにポイントすることに注意してください。

11
Simon_Weaver

編集（2018年5月31日）

今日、私は誰でもこれらの手順を容易にするDotNetプロジェクトテンプレートを作成しました。ここで試すことができます：

AspNetCore2Ang6Template：https://github.com/JuanGarciaCarmona/AspNetCore2Ang6Template

END編集（2018年5月31日）

2番目の質問：

特定のASP.Net Core APIと通信するクライアントアプリを構築することが目標である場合、各アプローチの長所と短所は何ですか？

私見の最良の選択は、単一プロジェクトからクライアント側（角度）とAPI（ASP NET Core Web APIコントローラー）をデプロイおよび提供できるため、両方を同じプロジェクトに含めることです。これは、開発段階で優れており、デプロイメントを容易にします。最良の選択を実現するには、両方のメカニズムを混在させることで、ドットネットプロジェクトを作成し、その中にangularコードも挿入し、MVCをアプリに追加して使用し、angularアプリを提供します。

最も簡単なレシピは次のとおりです。

  1. ドットネットプロジェクト（空のASP NETコアWebアプリケーション）を作成し、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を使用して実行できます。両方のコマンドが機能します。

少なくとも私にとって欠けていることの1つは、ライブリロードが機能していないことです。修正したらすぐにこの回答を更新します。

私はそれが役立つことを願っています、

ファン

編集（2018年5月26日）

ライブリロードに関しては、VSからデバッグするか、ドットネットを実行してアプリを実行することでその目標を達成することは不可能でしたが、スタイルと小さなしかしトリッキーなカスタマイズを確認することは、「ng serve」でWebアプリを起動することでした。

クライアントアプリからAPIコントローラーを呼び出す必要があるため、クライアントとサーバーの両方を実行する必要がある場合は、environment.tsでAPIベースURLを設定し、その間にVSとフロントからバックエンドを実行しますng serveで終わります。うまくいけば、これは将来のVSバージョンで解決または修正されるか、Angular 6用に準備された新しいaspネットコアSPAテンプレートで要求されたように、

3
Juan