用angular 2应用程序替换现有的MVC项目 [英] Replace existing MVC project with angular 2 app

问题描述

听起来有些奇怪，但是我将解释我想做什么.

It sounds a bit strange, but I will explain what I want to do.

我目前有一个使用C#编写的使用Razor Views的MVC网站.在同一项目中，我添加了一个可以像这样访问的API:www.mysite.com/api/controller/get.

I currently have an MVC website written in C# that is using Razor Views. In the same project I added an API which I can access like this : www.mysite.com/api/controller/get.

只需访问www.mysite.com/controllername/index即可访问常规页面.

Normal pages can be accessed simply by www.mysite.com/controllername/index.

现在的问题是我用角度2重新创建了网站，现在我需要在线发布该网站，我的意思是完全替换mvc项目.

Now the problem is I recreated the website with angular 2, and now I need to publish the site online, I mean completely replace the mvc project.

我的解决方案1是将angular应用程序和api分开:因此，我在www.mysite.com上发布了angular网站，并在api.mysite.com上发布了api.

My solution 1 is to separate the angular app and the api: So, I publish the angular web site on www.mysite.com and publish the api on api.mysite.com.

解决方案2 ?:我想知道是否可以用angular 2应用程序简单地替换当前项目的MVC部分?因此，所有内容都位于同一域中. (又名同一项目)

Solution 2?: I was wondering if it was possible to simply replace the MVC part of my current project by the angular 2 app? So everything stays on the same domain. (aka same project)

如果可能有解决方案2:如何在项目中包含angular 2应用程序，而又不与mvc项目冲突.换句话说，我要删除MVC路由.

If solution 2 is possible: how do you include the angular 2 app inside the project without routes conflicting with the mvc project. In other words, I want to remove the MVC routes.

推荐答案

所以我最终选择了解决方案2.

So I ended up going for solution #2.

结果比我想象的要容易.

Turns out to be easier than I thought.

这就是我所做的:

1. 在项目中创建一个名为"app"的文件夹
2. 运行ng-build并将构建文件放入此文件夹中.
3. 创建一个控制器，该控制器将充当应用程序的包装器.我的是AppController

4. 将此代码添加到控制器内部:

1. Create a folder in the project named whatever eg: "app"
2. Run ng-build and put the build files inside this folder.
3. Create a controller that will act as a wrapper to the application. Mine was AppController

4. Add this code inside the controller :

public ActionResult Index()
{
    return new FilePathResult("~/app/index.html", "text/html");
}

我们现在需要处理路线.进入RoutesConfig.cs并确保您在RegisterRoutes中有此

We now need to handle routes. Go in RoutesConfig.cs and make sure you have this in RegisterRoutes

   routes.MapRoute(
      name: "Default",
      url: "{controller}/{action}/{id}",
      defaults: new { controller = "App", action = "Index", id = UrlParameter.Optional }
    );

现在，您需要通过将"base href"更改为以下内容来编辑角度的index.html:base href="/app/"(这是因为角度项目的根位于您先前创建的文件夹应用程序之内.)

Now you need to edit your angular's index.html by changing the "base href" to this : base href="/app/" (This is because the root of the angular project is inside the folder app that you created earlier.)

现在这是棘手的部分，如果您运行它，它将起作用，但是您会很快注意到，如果没有错误，您将无法复制和粘贴您的网址.但是，我们很幸运拥有UrlRewrite！

Now here is the tricky part, if you run it, it will work, but you will quickly notice that you can't copy and paste your url without having an error. However, we were blessed to have UrlRewrite!

转到您的应用文件夹，如果尚未创建Web.config.

Go to your app folder and create a Web.config if you haven't already.

1. 这是位于app文件夹中的Web.config文件中的内容.

1. Here is what is inside the Web.config file located inside the app folder.

<?xml version="1.0"?>
 <configuration>
  <system.web>
   <compilation debug="true" targetFramework="4.0"/>
  </system.web>

  <system.webServer>
   <rewrite>
   <rules>
    <rule name="Angular Routes" stopProcessing="true">
     <match url=".*" />
      <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
     </conditions>
     <action type="Rewrite" url="/app/" />
     </rule>
   </rules>
  </rewrite>
 </system.webServer>
</configuration>

这甚至会忽略模式site.com/api，因此您的api调用仍然可以使用！另外，这里的魔力是动作类型为"Rewrite" url ="/app/"的行，这将解决无法复制粘贴链接的问题.最后，如果您有mvc控制器并尝试访问它们，它将仍然有效.

This will even ignore the pattern site.com/api, so your api calls will still work! Also, the magic here is the line with action type="Rewrite" url="/app/" this will fix the problem of not being able to copy paste your links. Finally, if you have mvc controllers and you try to access them, it will still work.

Voila.

这篇关于用angular 2应用程序替换现有的MVC项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！