web-dev-qa-db-ja.com

Angular 4をASP.NETCoreプロジェクトに追加

Visual Studio2017内のASP.NetCore1.1プロジェクトでAngular 4を利用したい（*。csprojファイルとして読み取る）

以前のASP.NETCore1.0およびVisualStudio 2015では、AngularJS（1.x.x）を依存関係としてproject.jsonに追加するだけで、それ自体が組み込まれていました。

現在、ASP.NetCoreとVS2017では、project.jsonファイルがなくなり、私が見つけることができる唯一のドキュメントは、CLIを使用してCLIを使用して生成するAngular4プロジェクトの開始について言及しています新しいangularアプリ。新しいプロジェクトが本当に必要ないか、別のUIプロジェクトにサービスを提供するために作成したすべてをリファクタリングする必要があります。クライアント側のUIエクスペリエンスを追加して、アプリを拡張したいだけです。

助言がありますか？

更新

この質問は多くの意見を得ており、情報はほとんど役に立たないので、このアップデートを提供します。

Visual Studio 2017（*.csproj）

  • Asp.Net Core 2.0 + Angular（v2.0〜v4.0）::組み込みのテンプレートを使用してください！最良のオプションIMO。

  • Asp.Net Core 1.X + Angular（v2.0〜v4.0）

    • VSプロジェクトを作成します。
    • AngularCLIを介してAngularプロジェクトを作成します
    • 構成とセットアップの詳細： リンク

Visual Studio 2015（project.json）

  • ツール：バージョン-preview2-まで-これ以上の更新はありません。すべての新しい.NETCore機能はVS2017に移行します。

    • Asp.Net Core 1.X + Angular（v2.0〜v4.0）

      • Asp.Netコアテンプレートパック
      • 注：私は悪いVSプラグインを推奨しません、MadsKristensenは良い仕事をします。
      • 構成とセットアップの詳細： ブログ投稿

    • Asp.Net Core 1.X + AngularJS（〜1.5）

    • Asp.Net MVC 5 + AngularJS（〜1.5）

注：AngularをNPM、Bower、などのASP.Net/.NetCoreプロジェクトで機能させるには、他にも多くの方法があります。 NuGetなど。シンプルで実際に機能するものを強調してみました。また、上記のPluralsightブログ投稿によると、これらはMicrosoftの方向性と一致しています。

c#angularvisual-studio-2017asp.net-core-1.1
7
Adam Vincent

[あなたがこれを具体的に尋ねなかったことを知っていますが、私の意見に非常に関連する考えを共有したかっただけです]

私は数か月前にまったく同じ時点にいて、angularcliを使用することにしました。そして私はその決定をした神に感謝します。比類のないほど明確であり、実際には、.netコアWebAPIバックエンドと完全に分離されたangularクライアントのようになります。 iPhone/AndroidアプリをVSソリューションに配置しないのとまったく同じように、angularも配置する本当の理由はありません。

[〜＃〜] update [〜＃〜] RazorでMVCを使用するか、ORをSPAとしてAngularを使用し、Angularを使用する場合はAngularCLI。また、Angularを使用する場合は、asp.net（コア）WebApiをRESTバックエンドとして使用してデータをフィードします。

6
dee zg

これがどのように混乱しているのかはわかりますが、deezgは正しいです。 2つの別々のプロジェクトが必要になります。 1つは.netコアバックエンドAPI（REST）で、もう1つはAngular 2スパです。完全に分離されます。

AngularJSを使用すると、jsファイルをかみそりのビューにドロップして1日と呼ぶことができます。ただし、Angular 2/4とReactを使用する場合は、各プロジェクトを独自のソリューションでホストするのが最適です。これは最初はばかげているように見えるかもしれませんが、APIを構築すると簡単になります。モバイルアプリ、デスクトップアプリなどでも利用できる機能を備えているため、将来性が保証されます。

.netコア用のdotnetspa services angular cli powershellコマンドがあることは知っていますが、それは本当に混乱のようなものであり、実際には無効なhtmlを出力しますおそらく SEOなどに悪影響を及ぼします。IMOは、別のプロジェクトでangular CLIを使用することをお勧めします。

本番環境では、.netコアAPIとangular 2プロジェクトを別々にホストします。

お役に立てば幸いです。

2
DJDJ

「ASP.NETコアプロジェクトにAngular 4を追加」」の意味は完全にはわかりませんが、これを行う1つの方法は次のとおりです。

  1. Angular 4プロジェクト（angular-cliを使用）を作成します。
  2. Angularプロジェクトと同じディレクトリに（.NET Core CLIを使用して）ASP.NETCoreプロジェクトを作成します。
  3. バンドルされたファイルをwwwrootディレクトリに自動的に配置するようにwebpack.config.jsファイル（angular-cliインストールの一部）を調整します（webpackがこれを担当します）。

私のブログでは、 このアプローチを示す詳細なチュートリアルがあります 。

1
Anton

私はAngular 4(SPA)および.NetコアWebAPIに取り組んでいます。リポジトリをチェックして理解を深めることができます。

認証、承認、ソーシャルログイン、MongoDBコネクタなどの多くの分野に対するソリューションを見つける必要がありました。

これが誰かがこれにつまずくための時間を節約することを願っています。

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

0
Sathya

Angular 6とASP.NETCORE 2.1を使用していますが、これはAngular 4で機能する可能性があります。

VS2017で新しいANGULARプロジェクトを作成する：

  1. VSで新しいWebアプリを作成します。フォルダ名に「。」を含めることはできません。 Angularはそれを受け入れません。例：DatingApp-SPA。次に、[空白]を選択します。
  2. VSを閉じて、許可を得るためにフォルダーをロックしないようにします
  3. プロジェクトフォルダのベースパスに移動します。
  4. 'ng newDatingApp-SPA'を実行します。これにより、既存のDatingApp-SPAプロジェクトにAngularグッズが追加されます。
  5. VSでソリューションを再度開きます。

新しいコンポーネントを作成する ：

  1. コマンドプロンプトを開き、プロジェクトフォルダーに移動します

  2. 次のコマンドを実行します。

    ng生成コンポーネントcomponent-name-with-lowercase

これにより、.html、.spec.ts、.ts、.cssファイルが生成され、app.module.tsが更新されます。

新しいサービスを作成する ：

  1. コマンドプロンプトを開き、プロジェクトフォルダーに移動します

  2. 次のコマンドを実行します。

    ng generate service _component-name-with-lowercase_

これにより、デフォルトで\ appフォルダーに.tsと.spec.tsが生成されます。これらのファイルは、\ app\_servicesなどの別のフォルダーに移動できます

0
Judyll