为.NET MVC项目构建/绑定Angular 2应用程序

我目前在.NET 4.6项目中有一个角度为'2'的应用程序。它很好地工作，但是我有关于捆绑的问题。该应用程序是使用最新的角度CLI创建的，我倾向于使用它创建/捆绑应用程序。捆绑的webpack创建从我的经验是非常棒的。为.NET MVC项目构建/绑定Angular 2应用程序

我对你的问题是你有任何关于捆绑的建议/想法，因此在.NET MVC应用程序中使用这个包？我已经看到了一些其他的线程，其中开发人员使用ng build命令的gulp文件，然后将此输出传输到另一个要使用的位置。

任何意见，将不胜感激。

Thomas

来源

2017-03-27 Rough Chop

在较小的项目，我用'tsc'获得TS - > JS，一些bash命令到HTML文件从TS文件夹复制到文件夹JS移动，然后rollup.js捆绑这一切向上。所有这些命令都可以分成一个'npm run build-my-bundle'命令，但我认为用gulp做这个命令是更清晰的方法。 – bergben

这会在一定程度上工作，但webpack的迷人魅力不应该被忽视！ –

我解决了这个问题。我已经实施了我认为是一个干净的解决方案。

对于任何有兴趣，我的回答是以下：

有一个“角”文件夹在你的项目的根目录，或其他任何名称您希望选择。
在这里面你有你的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应用程序，并转到这一观点的角度应用将出现。

亲切的问候

来源

2017-04-25 15:09:25

为.NET MVC项目构建/绑定Angular 2应用程序

回答

相关问题