使用Angular与现有的Asp.Net网站

Question

我正在一个项目中工作，我们已经使用Asp.Net构建了一个现有网站。 我们计划添加一些新页面并更新一些现有页面。我计划使用Angular 5和Webpack开发这些新页面。由于预算限制，我们无法将整个网站转换为Angular，但最终目标是完全转换为Angular 5。

最近有人在这样的混合应用程序上工作过吗？ 请问是否可行？如果因技术混合而产生任何性能影响，请问是否有可能解决？

- Akash

---

嗨@Akash，你对迁移有任何反馈吗？ - antoninod

Answer 1

是的，我也在类似的情况下工作，这是完全可能的。一个.NET页面（MVC？）可以返回一个Angular SPA，并从那一点开始控制UI流程。

比如说你想在Angular中创建一个“用户配置文件”页面。当用户在标准的MVC站点上导航到该页面时，它应该返回带有加载了Angular应用程序的页面（作为javascript脚本引用）。从那里开始，Angular应用程序可以处理进一步的重定向和逻辑。

这确实会使一些事情变得复杂，但通常不可能一次性移植所有内容。这种方法使我们能够逐个页面地转移到Angular。

- Carlos Rodriguez

---

如果你不小心，使用Angular进行客户端“乐趣”可能会导致性能问题。Javascript的变更检测可能会变得非常昂贵。但总体而言，我不会说我遇到了任何性能问题。不幸的是，我没有设置任何plunkr，因为我不拥有这个代码库。 - Carlos Rodriguez

你使用了 SystemJS 还是 Webpack？ - Akash

我是在这个项目开始后加入的，所以我不确定是否有任何文档可以用作灵感来源。抱歉 :-\。但我们正在使用Webpack处理客户端相关的内容。 - Carlos Rodriguez

Carlos Rodriguez：谢谢。我正在进行一个概念验证。我很快会在这里发布结果。 - Akash

没问题。这绝对是可能的。我正在开发的产品已经被客户在这种“混合状态”下使用，而且非常容易管理。 - Carlos Rodriguez

Answer 2

我们在一家大公司已经做到了这一点。非常简单。使用angular-cli创建一个新项目： ng new my-project 然后将内容复制到现有ASP.NET解决方案的根目录中。现在，您需要使用 ng build --watch 而不是 ng serve 并将脚本包含从/dist/index.html复制到您的aspx或cshtml文件中。

- tic

---

我根据您的建议尝试了，但是出现了以下错误。如果我删除所有Angular代码，那么它就可以正常工作。您是否遇到过这样的问题？我确实创建了虚拟目录，但我无法构建此项目。“在应用程序级别之外使用已注册为allowDefinition ='MachineToApplication'的部分是错误的。此错误可能是由于未将虚拟目录配置为IIS中的应用程序引起的。” - Akash

只是为了澄清，这个错误是因为node_module目录中有一些包含“web.config”文件的包。如果删除此文件夹，Angular内容将无法构建。对此有什么想法吗？ - Akash

我解决了。只需将“node_modules”文件夹隐藏起来，一切都正常工作。 - Akash