MVC项目的Angular2设置

我试图找出将Angular2集成到传统SpringMVC框架中的最佳方法和实践。这不是SpringMVC所特有的，而是任何MVC框架所特有的

在Angular1世界中，服务器呈现页面，Angular1可以纯粹用于客户端功能。每页将有1个ng应用程序

从我所看到的角度来看，Angular（Typescript+Angular CLI）的使用似乎非常适合单页应用程序，其中html由节点Web服务器呈现

我还研究了Angular2（使用普通js），但似乎缺少了Typescript中提供的一些功能。例如，

templateUrl

属性

总结一下将Angular2集成到MVC框架中的建议设置是什么

要求

在本地开发环境中， 我希望能够拥有

ng serve

提供的类似功能（即实时重新加载），但页面本身将由服务器呈现

在prod中，我应该能够打包并执行生产构建最佳实践

---

先谢谢你

在使用Angular 2作为您的用例之前，最好调查一下这里的许多选项，即使您来自Angular 1.x背景。我之所以这么说是因为我最近在一个项目中使用了Angular和另一个MVC服务器端框架。以下是我经历过的一些缺点/头痛

服务器渲染 使用Angular 1.x时方便的一件事是能够像这样在服务器上渲染模板

只需在服务器上快速进行数据绑定和呈现主模板，然后在编译过程结束后home.html就开始生效。在Angular中，似乎不支持或建议从服务器中提取模板。在我看来，这是对Angular 2的一次大回退

现在我相信服务器渲染可以通过Angular 2实现，但我认为它只能在使用模块的初始页面加载期间发生

工具 如果你想创作Angular 2应用程序，那么就需要很多工具。Typescript或ES6，在大多数情况下，您需要一个单独的文本编辑器，如VS代码或Webstorm。我的Visual Studio 2015企业版甚至不再为角度开发而裁剪。因此，我在与服务器端框架完全隔离的情况下使用Webstorm进行所有角度的开发

对于许多较新的JS框架来说，最令人沮丧的事情之一是如何将应用程序交付到浏览器。这就是构建系统的用武之地。开发过程的这一方面可能是最复杂的。因此，您几乎不得不使用一个种子项目，该项目具有一个经过良好调优的构建过程。角度cli似乎是目前最好的选择。即使有了这些优秀的入门项目，我也不得不创建一个额外的吞咽过程来自动化一些事情

考虑到这些问题，您可能想看看还有哪些其他选项可以更好地兼容更传统的MVC服务器方法。我听说了一些好消息。React甚至可能更适合这种方法。我强烈地考虑这两种框架，甚至可能是针对较小场景的VanillaJS

这并不是说Angular不是一个很棒的框架。我只是认为工具还没有完全到位，而且它可能不是适用于所有场景的最佳工具。考虑到这一点，这就是我使用Angular Cli所采取的方法

Angular-Cli.json 当Angular cli生成生成时。您可能希望该构建输出到服务器端框架的公共目录。这可以通过修改angular-cli.json文件的outDir属性来实现

“outDir”：“./MVC项目/wwwroot”

代理到服务器API 使用ng serve时，您可能希望将所有api调用代理到服务器项目。这可以通过将proxy.conf.json文件添加到CLI项目的根目录中来实现：

{
“/api”：{
“目标”：http://localhost:8000",
“安全”：错误
}
}

为应用程序提供服务 然后，您需要在服务器呈现的模板中的某个位置包含“应用”组件。为了简单起见，假设这是您的index.html文件。下面示例中的标记与.NETCore相关，但希望您能理解

@节脚本{
}

在我看来，承认这一点很痛苦，但我认为最好忘记MVC框架的视图部分。基本上，您的后端（在您的例子中是Spring）将只是一个RESTAPI。服务器将呈现单页index.html，Angular将完全负责您的前端。您可以尝试混合这两个框架，但如果要将其中一个框架集成到另一个框架中，您可能会遇到一些麻烦。。。此外，通过分离正面和背面，您可以随时更改前端框架，而无需触摸背面，反之亦然