Question

我目前有一个角色＆＃39; 2＆＃39; .NET 4.6项目中的应用程序。它工作得很好但是我对捆绑问题有疑问。该应用程序是使用最新的角度CLI创建的，我倾向于使用它构建/捆绑应用程序。根据我的经验，捆绑包的webpack创建非常棒。

我的问题是，您对.NET MVC应用程序中捆绑和使用此捆绑包有什么建议/想法吗？我已经看到一些其他线程，其中开发人员使用gulp文件执行ng build命令，然后将此输出传输到另一个要使用的位置。

任何建议都将受到赞赏。

托马斯

Answer 1

我解决了这个问题。我已经实现了我认为的清洁解决方案。

对于任何有兴趣的人，我的答案如下：

在项目的根目录中添加“angular”文件夹，或者您希望选择的任何其他名称。
在其中你有你的angular-cli.json和package.json文件。
如果您稍后在部署线上创建一个nuget包（很可能不是），请将angular / src / app / tsconfig.json中的“outDir”设置为“../出TSC”。这意味着您可以将“dist”文件夹添加到包中，而不包括“out-tsc”文件夹。
您必须在用户帐户的npm文件夹中全局安装angular cli。运行npm install -g @ angular / cli来执行此操作。
在angular / src级别有一个空白的index.html。（除非您特别需要在此处添加内容）。
配置root tsconfig（.net项目）以排除'angular'文件夹。
您需要在.csproj中设置预构建事件。这需要进入angular目录，运行npm install，然后运行ng build（如果在调试中）或ng build --prod（如果在发布中）。要确定您的proj是否处于调试/释放状态，宏是$（ConfigurationName）。对于我的解决方案，我创建了一个powershell脚本，它将ConfigurationName作为参数并运行npm install然后运行ng build。我将此脚本作为.csproj中的预构建事件运行。你也可以在这里添加角度cli的全局安装，但我跳过了这个。
要将捆绑的角度文件包含到MVC视图中，我使用了导入链接：

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

这在Chrome以外的浏览器中不起作用，所以我在它上面添加了一个polyfill。此polyfill来自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应用程序并转到此视图时，您的角度应用程序将会出现。

亲切的问候

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

1 个答案: