本文介绍了为 .NET MVC 项目构建/捆绑 Angular 2 应用程序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前在 .NET 4.6 项目中有一个 angular '2' 应用程序.它运行良好,但我对捆绑有疑问.该应用程序是使用最新的 angular CLI 创建的,我更喜欢用它构建/捆绑应用程序.根据我的经验,bundle 的 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:

  1. 在项目的根目录下有一个angular"文件夹,或者您想选择的任何其他名称.

  1. 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 文件夹中全局安装 angular 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).

配置根 tsconfig(.net 项目的)以排除 '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:

这在 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 应用程序并转到此视图时,您的 Angular 应用程序将出现.

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 应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-29 13:13
查看更多