將Angular 4添加到ASP.NETCore項目

Question

我想在Visual Studio 2017中的ASP.NetCore 1.1項目中使用Angular 4（讀作：* .csproj文件）

以前使用ASP.NET Core 1.0和Visual Studio 2015，您只需將AngularJS（1.xx）作為依賴項添加到project.json中，它就可以自行連接。

現在，使用ASP.NetCore和VS2017， project.json文件已經消失，我可以找到的唯一文檔是通過使用CLI並使用CLI生成一個新的角度應用程序來啟動Angular 4項目。 我真的不想要一個新項目，或者必須重構我創建的所有內容，以便為單獨的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項目。
  • 通過Angular CLI創建Angular項目
  • 配置和設置詳細信息： 鏈接

Visual Studio 2015（ project.json ）

• 工具：最高版本-preview2 - 沒有進一步的更新，所有新的.NET Core功能都將轉移到VS 2017

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

    • Asp.Net核心模板包
    • 注意：我不認可一個糟糕的VS插件，Mads Kristensen做得很好。
    • 配置和設置詳細信息： 博客文章

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

    • 配置和設置詳細信息： Microsoft教程

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

    • Pluralsight博客指南

注意：還有很多其他方法可以讓Angular與ASP.Net / .NetCore項目（如NPM，Bower，NuGet等）一起工作。我試圖強調那些簡單且實際工作的項目。 根據上面的Pluralsight博客文章，這些也符合微軟的發展方向。

Answer 1

[我知道你並沒有特別提出這個問題，只是想分享一個在我看來非常相關的想法]

幾個月前，我處於完全相同的位置，我決定采用角度cli。 我感謝上帝，我做出了這個決定。 無比的更清晰，它實際上把它們應該是：.net core web api后端和完全分離的角度客戶端。 就像你不會將你的iphone / android應用程序放入VS解決方案一樣，沒有真正的理由不設置角度。

更新要么使用MVC和Razor，要么使用Angular作為SPA，如果使用Angular，請使用Angular CLI。 如果你使用angular，使用asp.net（核心）Web Api作為REST后端將數據輸入到它中

Answer 2

我可以看到這是多么令人困惑，但dee zg是正確的。 你將需要兩個獨立的項目。 一個是.net核心后端api（REST），另一個是Angular 2 spa。 將完全分離。

使用AngularJS，您可以將js文件放入剃刀視圖中並將其稱為一天。 但是，使用Angular 2/4和React，最好將每個項目托管在自己的解決方案中。 這可能在開始時看起來很愚蠢，但是當你構建你的api時，它可以通過移動應用程序，桌面應用程序等消耗的能力輕松地進行未來驗證。

我知道.net核心有一個dotnet spa服務angular cli powershell命令，但它實際上有點混亂，實際上輸出的無效html 可能對SEO等有害。最好，IMO，只使用角度CLI在一個單獨的項目中。

在生產方面，您將分別托管.net核心API和角度2項目。

希望有所幫助。

Answer 3

“將Angular 4添加到ASP.NET核心項目”對我來說並不完全清楚，但有一種方法是：

1. 創建一個Angular 4項目（使用angular-cli）。
2. 在與Angular項目相同的目錄中創建一個ASP.NET Core項目（使用.NET Core CLI）。
3. 調整webpack.config.js文件（這是angular-cli安裝的一部分），以便自動將捆綁文件放在wwwroot目錄中（webpack將對此負責）。

在我的博客上， 我有一個詳細的教程來演示這種方法 。

Answer 4

我一直在研究Angular 4（SPA）和.Net核心web api。 您可以查看存儲庫，您可能會更好地理解。

我必須找到許多領域的解決方案，如身份驗證，授權，社交登錄，MongoDB連接器等

希望這可以節省絆倒這個的人的時間。

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

Answer 5

我正在使用Angular 6和ASP.NET CORE 2.1，但這可能適用於Angular 4。

在VS2017中創建一個新的角度項目：

1. 在VS中創建一個新的Web應用程序。 文件夾名稱不應包含“。” 因為Angular不接受它。 例如：DatingApp-SPA。 然后選擇“空白”。
2. 關閉VS，以便它不會鎖定文件夾以獲得任何權限
3. 導航到項目文件夾的基本路徑。
4. 運行'ng new DatingApp-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