Replace existing MVC project with angular 2 app

Question

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.

Yeah... its possible. I've run Angular2/ASP.NET web API side by side several times. What isn't clear from this question is which specific part of this question you are concerned about or having trouble with — BradleyDotNET
– BradleyDotNET, Commented Apr 18, 2017 at 22:16
Solution 2 is possible. Check iis rewrite, make the rule so that the angular one will be ignored by iis, it then passes through to angular engine. — Jonathon
– Jonathon, Commented Apr 18, 2017 at 22:24
Bear in mind that on option 1 you will have to deal with CORS. On option 2 you can simply create a different base route. — joaofs
– joaofs, Commented Apr 18, 2017 at 22:24

MasterJohn · Accepted Answer · 2017-04-19 00:50:45Z

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.

BradleyDotNET · Accepted Answer · 2017-04-18 22:25:20Z

0

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.

answered Apr 18, 2017 at 22:25

BradleyDotNET

61.5k10 gold badges106 silver badges124 bronze badges

2 Comments

MasterJohn Over a year ago

Thats really good to know, but I just don't understand how you want me to "replace ASP.NET MVC code with an Angular site" Do I need any plugins? What are the steps in order to replace it?

BradleyDotNET Over a year ago

@MasterJohn You just replace the files. Beyond that, you'll need to be more specific

Collectives™ on Stack Overflow

Replace existing MVC project with angular 2 app

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related