Replace existing MVC project with angular 2 app

问题

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

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.

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

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.

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.

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)

Edit: 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.

回答1:

So I ended up going for solution #2.

Turns out to be easier than I thought.

This is what I did:

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

Add this code inside the controller :

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

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 }
    );

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.)
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!

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

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>

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.

回答2:

Yes, you can replace ASP.NET MVC code with an Angular site that utilizes Web API calls. As you have suspected; the ASP.NET MVC routes will take precedence over any angular ones.

The main thing to do is make sure you have static file serving set up so your web server will send the appropriate javascript and html files to the server. That should at least get your angular app bootstrapping.

The other import thing to do is use the "#" style of routing in angular. MVC doesn't use these routes so they always get passed on to angular. Its possible to configure the router to pass on "normal" routes to angular but this approach tends to be easier.

来源：https://stackoverflow.com/questions/43483065/replace-existing-mvc-project-with-angular-2-app

标签

asp.net-mvc

angular

publish