为.NET MVC项目构建/捆绑Angular 2应用程序 [英] Building/Bundling an Angular 2 application for a .NET MVC project
问题描述
我目前在.NET 4.6项目中有一个角度为'2'的应用程序.它运行良好，但是我对捆绑有疑问. 该应用程序是使用最新的有角度的CLI创建的，我偏爱使用它来构建/捆绑该应用程序.从我的经验来看，该捆绑包的webpack创造的很棒.
I currently have an angular '2' application inside of a .NET 4.6 project. It is working nicely however I have question with regards to bundling. The application was created using the latest angular CLI and I have a preference to building/bundling the application with it. The bundle's webpack creates are fantastic from my experience.
我对您的问题是，您对捆绑并在.NET MVC应用程序中使用此捆绑包有任何建议/想法吗? 我见过其他一些线程，开发人员在其中使用了gulp文件，该文件执行ng build命令，然后将该输出传输到另一个要使用的位置.
My question to you is do you have any recommendations/idea's with regards to bundling and thus consuming this bundle in a .NET MVC application? I have seen some other threads where developers have used a gulp file that does the ng build command then transports this output to another location to be consumed.
任何建议将不胜感激.
托马斯
推荐答案
我解决了这个问题.我已经实施了我认为是干净的解决方案.
I resolved this. I have implemented what I think is a clean solution.
对于任何有兴趣的人，我的回答如下:
For any that are interested, my answer is below:
-
在项目的根目录中有一个"angular"文件夹，或您要选择的其他任何名称.
Have an 'angular' folder at the root of your project, or any other name you wish to choose.
在其中有您的angular-cli.json和package.json文件.
Inside of this you have your angular-cli.json and package.json files.
如果稍后要在部署行中创建nuget包(很可能不是)，则将angular/src/app/tsconfig.json中的"outDir"设置为"../out-tsc".这意味着您可以将"dist"文件夹添加到软件包中，而不必同时包含"out-tsc"文件夹.
In the case that you are creating a nuget package later down the line for a deployment (most likely not) then set the "outDir" in your angular/src/app/tsconfig.json to "../out-tsc". This means you can add the "dist" folder to the package without including the 'out-tsc' folder as well.
您必须在用户帐户的npm文件夹中全局安装角度cli.运行npm install -g @ angular/cli来执行此操作.
You must have the angular cli installed globally in your user account's npm folder. Run npm install -g @angular/cli to do this.
在angular/src级别具有空白的index.html. (除非您特别需要为此添加一些东西).
Have a blank index.html at the angular/src level. (unless you specifically need to add something to this).
配置(.net项目的)根tsconfig，以排除"angular"文件夹.
Configure your root tsconfig (of your .net project) to exclude the 'angular' folder.
您需要在.csproj中设置一个预构建事件.这需要cd进入angular目录，运行npm install，然后在调试中执行ng build，或者在发布中执行ng build --prod.要确定您的项目是否在调试/发布中，宏为$(ConfigurationName).对于我的解决方案，我创建了一个Powershell脚本，该脚本以ConfigurationName作为参数并运行npm install然后ng build.我将此脚本作为.csproj中的预构建事件运行.您也可以在此处添加angular cli的全局安装，但我跳过了.
You need to set up a pre-build event in your .csproj. This needs to cd into the angular directory, run npm install, then ng build if in debug, or ng build --prod if in release. To determine if your proj is in debug/release the macro is $(ConfigurationName). For my solution I created a powershell script that took the ConfigurationName as an argument and ran npm install then ng build. I ran this script as a pre-build event in the .csproj. You could add the global install of the angular cli here as well but I skipped this.
为了将捆绑的角度文件包含到MVC视图中，我使用了导入链接:
To include your bundled angular files into your MVC view I used an import link:
<link rel="import" href="/angular/dist/index.html">
这不适用于除chrome以外的浏览器，因此我在其上方添加了polyfill.该polyfill来自webcomponentsjs:
This doesn't work in browsers other than chrome so I added a polyfill above it. This polyfill is from 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应用程序并转到此视图时，将出现您的角度应用程序.
Now when you build then boot up your .NET MVC application and go to this view your angular application will appear.
亲切的问候
这篇关于为.NET MVC项目构建/捆绑Angular 2应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
