將現有的Angular4 CLI遷移到.NET Core 2 Angular模板項目

Question

我有一個使用angular CLI構建的現有Angular4應用程序。 正常開發，以index.html和main.ts為切入點。 項目用戶使用SASS for CSS。

我現在需要在.NET Core Web應用程序中運行此Angular應用程序（我知道這過去很頭疼），所以我知道在Visual Studio 2017中，Microsoft創建了新的Web模板，尤其是Angular和React。

我已經使用Angular模板創建了一個新項目，將相應的依賴項復制並粘貼到packages.json文件中，將源從src目錄復制到ClientApp目錄，調整了默認的Webapp文件以加載適當的文件，但是我收到很多錯誤消息（太多甚至無法粘貼到此處）。

我認為我不是在處理一個特定的問題，而是在使用一種完全不同的Angular開發方法。 是否有關於如何將Angular4 CLI項目轉換為Visual Studio .NET Core 2模板的指南？

Answer 1

您可以按照以下步驟將現有的Angular-cli遷移到.NET Core 2 Angular模板項目。

[注意：您可以在此處下載一個倉庫來演示此過程： https : //github.com/johnpankowicz/angular-cli-to-SPA-template ]

確保節點為v7.5.0或更高版本。

使用SPA模板創建Angular Asp.Net Core應用程序：

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
mkdir spa
cd spa
dotnet new angular
dotnet restore
npm install
start spa.csproj

按F5鍵測試您到目前為止所擁有的。

刪除模板生成的樣本組件：

從app.module.shared.ts中刪除HomeComponent，CounterComponent NavbarComponent FetchdataComponent和引用。

編輯app.component.html並將內容替換為：

    < h1 > Hello, world! < /h1 >

按F5測試您的更改。

用自己的代碼替換客戶端應用代碼

將ClientApp / app的內容替換為angular-cli項目的“ src / app”文件夾的內容-除了將以下文件保留在ClientApp / app中：

    app.module.browser.ts
    app.module.server.ts
    app.module.shared.ts

編輯app.module.browser.ts和app.module.server.ts。 如果此文件不在預期的位置，請修復app.component的導入引用。

編輯app.module.shared.ts。 從應用所需的導入，導出和聲明中添加缺少的導入語句和缺少的類。 注意：不包括app.module.browser.ts或app.module.server.ts中已經包含的內容。

現在，要使您的應用程序運行，您可以將所有模塊添加到app.module.shared.ts中。 但是一旦您熟悉了服務器端渲染，就可以利用僅在服務器上或僅在瀏覽器中運行特定的代碼。

編輯Views / Home / Index.cshtml。 將應用選擇器名稱更改為AppComponent中定義的名稱。 將您添加的所有內容添加到根index.html文件中。

編輯配置文件

編輯以下文件，並將AppComponent選擇器名稱從“ app”更改為選擇器名稱。

    ClientApp/boot.browser.ts
    ClientApp/boot.server.ts 

編輯“ package.json”，並為您先前添加到angular-cli生成的“ package.json”文件中的應用程序添加所有其他依賴項。

編輯tsconfig.json並將“茉莉花”添加到“ compileOptions”中的“類型”數組中。 這將添加angular-cli生成的.spec文件所需的類型。

        "types": [
          "webpack-env",
          "jasmine" ]

使用Sass

與angular-cli相比，AspNetCore.SpaTemplates將webpack.config.js放在您的項目文件夾中，可以在其中進行修改。 您可以在其中啟用對Sass / Less的支持。 這是啟用更少支持的指南： https : //github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#example-a-simple-webpack-setup-that-builds-less

調試注意事項

進行調試：將網絡瀏覽器設置為Google Chrome。 當前存在有關斷點的未解決問題。 您需要在開始調試（F5）之后設置斷點。 請參閱： https : //developercommunity.visualstudio.com/content/problem/125941/typescript-debugging-is-not-working-on-visual-stud.html從評論中可以看到，他們認為這是優先級較低的錯誤在這個時候修復。 希望它將很快優先發展。

在.Net Core中運行angular-cli生成的代碼的另一種方法

在.Net Core中有一種更簡單的方法來運行angular-cli應用。 這是我在對原始問題的評論中提到的內容。 您可以將angular-cli應用程序封裝在一個空的Asp.Net Core Web應用程序內。 要查看操作方法，請訪問： https : //stackoverflow.com/a/47229442/1978840

Answer 2

我認為這仍然是一項艱巨的工作。 我們在項目中所做的就是使用Visual Studio 2017從頭開始一個新的.NET核心角度項目，並開始逐個文件放置文件。 從您的極簡主義組件開始。 放置所有腳本和主題，修改路徑，其他建議是升級某些內容，例如npm，打字稿（請注意，因為某些問題與版本的不兼容性有關）。 但是，經過一些工作之后，您仍然會遇到一些問題，然后進行一些搜索或向社區提出特定的錯誤。