Question

我是Angular 2的新手，并且已经习惯了Angular Development Paradigm，它拥有所需的所有庞大的生态系统和支持工具 - 捆绑，缩小，树木挖掘等等。

我已经缩小到使用Angular CLI / VS Code，因为它似乎允许我开发快速原型并且似乎处理了大量手动工作来配置我需要在生产文件中部署生产文件的那些工具/插件/ dist文件夹。

我的目标是将前端开发与我现有的ASP.NET MVC应用程序与WebAPI服务集成，以处理来自Angular App的任何请求

带有MVC 5的ASP.NET应用程序有几个＆＃34; SILO＆＃34; Angular 2 App的基于shell的结构（基于Miguel Castro博客的Silo＆）与常规MVC App并行生活。例如URL：

/ {Controller} / {Action} / {Id} =＆gt;代表MVC定期生成的网页

/ NG2Test / =＆gt;最初由MVC处理以生成包含Angular的shell，其基于＆＃34; index.html＆＃34; AngularCLI使用的页面

换句话说，第一次单击/ NG2Test将使ASP.NET MVC生成带有Angular指令的shell。然后从那时起，根据URL中的路由类型，它将是MVC Route或Angular Route，它决定了谁应该处理该动作。

目前，由于缺乏正式的部署程序，我在我的MVC项目中创建了一个dist文件夹，其中包含从（ng build --prod）生成的AngularCLI部署文件。

因此，部署时如下：

在VSCODE＆gt;终端，运行＆＃34; ng build --prod＆＃34;我的Angular App，并将dist文件夹复制到VS2015 / dist文件夹
在VS2015中，编辑我的shell（我的视图中的示例* .cshtml）以包含bundle.css链接和AngularCLI包中的3个脚本我的

MVC App

@{
    ViewBag.Title = "NGTest Silo";
}


<link href="~/dist/styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet" />

<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<p>Use this area to provide additional information. with base href = ~/dist</p>
<app-root>Loading...</app-root>

<script type="text/javascript" src="~/dist/inline.f37adff22689ecade3b3.bundle.js"></script>
<script type="text/javascript" src="~/dist/vendor.28092c14ec178517088c.bundle.js"></script>
<script type="text/javascript" src="~/dist/main.9049e38faa01f3bfab56.bundle.js"></script>

正常构建ASP.NET MVC并发布它。

我的问题：

我的场景是否有推荐的开发设置（考虑到我仍然需要使用VS2015维护我的常规MVC应用程序并在混合中使用Angular添加新的开发前端 - 使用VS Code和Angular CLI）
如何处理角色应用程序的部署以便最终输出文件得到优化（我读了很多设置包括SYSTEM.JS但是从我最初的阅读WEBPACK更多的是生成优化文件 - 我认为AngularCLI是做，对吗？）
如何在cshtml中自动编辑我的SILO以包含AngularCLI生成的js和css文件？
如何在此设置中添加延迟加载的脚本？生成的js束看起来很大。我可以想象，当一个SILO可以根据需要加载该部分时，是否可以拥有自己的一组不同文件？

非常感谢任何指针，这将使部署优化的Angular应用程序变得更容易。

部署ANGULAR 2（使用Angular CLI build --prod）和ASP.NET MVC 5 / WEBAPI App

0 个答案: