Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Migrating MVC 5 Project to Angular 2

Any suggestion on the approach for migrating .Net MVC 5 project to Angular 2. It's a big project and we cannot just wait for the complete transition. We are kind of looking for a parallel move when we can migrate couple of pages at a time and still keep using the old project.

I am seeing solutions on how to use Angular 2 in MVC 5 but we don't want to merge the concerns here as we faced some problems while doing that with another javascript framework.

Your help is appreciated.

like image 418
Raj Avatar asked Jun 13 '26 08:06

Raj


1 Answers

For a period of time, some of your routes will be handled by asp.net mvc serverside, whereas some routes will be handled by the ng2 app clientside.

First of all, imagine what your app will look like when the transition is done: you will have exactly ONE razor cshtml view that will launch your app. Go ahead and create this view now, calling it something like "ngappview.cshtml". It will look something like this:

<!DOCTYPE html>

<html>
<head>
    <base href="/">
    <link href='~/assets/styles.bundle.min.css?v=5359476866832222' rel="stylesheet">

</head>
<body>
    <app>
        loading...
    </app>
    <script type='text/javascript' src='~/assets/main.bundle.min.js?v=5359476866832222'></script>

</body>
</html>

Now, serverside, every time you convert a particular page to an ng2 app view, simply serve up your ngappview.cshtml view. Here would be your mvc controller:

[Route("someRouteConvertedToNg2")]
public class SomeController: Controller {

  public ActionResult ThisIsNowNg2Function() {

    return View("~/Views/ngappview.cshtml");
  }


}

And on the client side, when your ng2 app needs to call a route that is still being managed serverside by asp.net mvc, you will have to have to force a postback to that particular route. Keep in mind that, for every postback, you would lose any state you were maintaining in the ng2 app; and the ng2 app would be reloaded for every ng2 view (could be annoying). It would be a bit messy for a while, but eventually it would sort itself out.

Meanwhile, here is a related post about how best (in my opinion) to set up an ng2 project with asp.net mvc: https://stackoverflow.com/a/40234393/3532945

like image 85
brando Avatar answered Jun 14 '26 23:06

brando



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!