我解決了這個問題。我已經實施了我認爲是一個乾淨的解決方案。
對於任何有興趣,我的回答是以下:
有一個「角」文件夾在你的項目的根目錄,或其他任何名稱您希望選擇。
在這裏面你有你的angular-cli.json和package.json文件。
如果你正在創建一個nuget包(稍後可能不是),那麼在你的angular/src/app/tsconfig.json中設置「outDir」爲「../out -tsc」。這意味着您可以將「dist」文件夾添加到包中,而不包括「out-tsc」文件夾。
您必須在您的用戶帳戶的npm文件夾中全局安裝角度cli。運行npm install -g @ angular/cli來執行此操作。
在角度/ src級別有一個空白的index.html。 (除非你特別需要添加一些東西)。
配置您的根tsconfig(您的.net項目)以排除'angular'文件夾。
您需要在.csproj中設置一個預生成事件。這需要cd到角度目錄中,運行npm install,然後如果在調試時運行ng build,或者如果在發佈版本中運行ng build --prod。要確定您的proj是否在調試/釋放宏中$(ConfigurationName)。對於我的解決方案,我創建了一個將ConfigurationName作爲參數的powershell腳本,然後運行npm install然後運行ng build。我在.csproj中將此腳本作爲預生成事件運行。你可以在這裏添加角度cli的全局安裝,但是我跳過了這個。
要包括你的捆綁角文件到我使用的進口環節你的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應用程序,並轉到這一觀點的角度應用將出現。
親切的問候
在較小的項目,我用'tsc'獲得TS - > JS,一些bash命令到HTML文件從TS文件夾複製到文件夾JS移動,然後rollup.js捆綁這一切向上。所有這些命令都可以分成一個'npm run build-my-bundle'命令,但我認爲用gulp做這個命令是更清晰的方法。 – bergben
這會在一定程度上工作,但webpack的迷人魅力不應該被忽視! –