2017-03-27 50 views
2

我目前在.NET 4.6項目中有一個角度爲'2'的應用程序。它很好地工作,但是我有關於捆綁的問題。 該應用程序是使用最新的角度CLI創建的,我傾向於使用它創建/捆綁應用程序。捆綁的webpack創建從我的經驗是非常棒的。爲.NET MVC項目構建/綁定Angular 2應用程序

我對你的問題是你有任何關於捆綁的建議/想法,因此在.NET MVC應用程序中使用這個包? 我已經看到了一些其他的線程,其中開發人員使用ng build命令的gulp文件,然後將此輸出傳輸到另一個要使用的位置。

任何意見,將不勝感激。

Thomas

+0

在較小的項目,我用'tsc'獲得TS - > JS,一些bash命令到HTML文件從TS文件夾複製到文件夾JS移動,然後rollup.js捆綁這一切向上。所有這些命令都可以分成一個'npm run build-my-bundle'命令,但我認爲用gulp做這個命令是更清晰的方法。 – bergben

+0

這會在一定程度上工作,但webpack的迷人魅力不應該被忽視! –

回答

1

我解決了這個問題。我已經實施了我認爲是一個乾淨的解決方案。

對於任何有興趣,我的回答是以下:

  1. 有一個「角」文件夾在你的項目的根目錄,或其他任何名稱您希望選擇。

  2. 在這裏面你有你的angular-cli.json和package.json文件。

  3. 如果你正在創建一個nuget包(稍後可能不是),那麼在你的angular/src/app/tsconfig.json中設置「outDir」爲「../out -tsc」。這意味着您可以將「dist」文件夾添加到包中,而不包括「out-tsc」文件夾。

  4. 您必須在您的用戶帳戶的npm文件夾中全局安裝角度cli。運行npm install -g @ angular/cli來執行此操作。

  5. 在角度/ src級別有一個空白的index.html。 (除非你特別需要添加一些東西)。

  6. 配置您的根tsconfig(您的.net項目)以排除'angular'文件夾。

  7. 您需要在.csproj中設置一個預生成事件。這需要cd到角度目錄中,運行npm install,然後如果在調試時運行ng build,或者如果在發佈版本中運行ng build --prod。要確定您的proj是否在調試/釋放宏中$(ConfigurationName)。對於我的解決方案,我創建了一個將ConfigurationName作爲參數的powershell腳本,然後運行npm install然後運行ng build。我在.csproj中將此腳本作爲預生成事件運行。你可以在這裏添加角度cli的全局安裝,但是我跳過了這個。

  8. 要包括你的捆綁角文件到我使用的進口環節你的MVC觀點:

<link rel="import" href="/angular/dist/index.html">

這並不在非Chrome瀏覽器工作,所以我加入它上面的填充工具。這種填充工具是從webcomponentsjs:

<script async src="~/Scripts/polyfills/webcomponentsjs/lite.js" type="text/javascript"></script> 
<link rel="import" href="/angular/dist/index.html"> 

結果視圖:

@{ 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<app-root>Loading...</app-root> 

<script async src="~/Scripts/polyfills/webcomponentsjs/lite.js" type="text/javascript"></script> 
<link rel="import" href="/angular/dist/index.html"> 

現在,當您建立再啓動您的.NET MVC應用程序,並轉到這一觀點的角度應用將出現。

親切的問候