CODEWITHSUNDEEP
c#asp.netangularjsasp.net-mvc
Evonet
Evonet

Reputation: 3640

How to add Angular 2.0 to an existing ASP.NET MVC app

I have a very large asp.net MVC 4.0 application that I'd like to start migrating to Web API with asp.net 5.0 and Angular 2.0.

The main reason is to start future proofing and setting up some new components into a more modern SPA architecture.

My plan is to have a small section of the existing site which when routed to displays an Angular SPA app calling Web API for data, instead of the MVC controller and functions. For this section, I'm not planning on using ASP.NET MVC features such as the shared layout page, bundling, routing etc, preferring to instead leave this to angular.

Both my existing MVC and new Web api projects will be using the data layer project/repository which uses EF.

My questions are:

  1. How does this sound? I couldn't find much literature on how to introduce angular into an existing app
  2. Should I use separate projects, or a whole separate solution on a new domain which accesses the same db? Ie, rather than migrate, start a new solution on ASP.NET 5.0
  3. How to I handles authentication and authorisation? I'm using Identity v2.0, can I mix that so that users accessing pages on the MVC site use standard forms based authentication, but when accessing the Angular/ API portion they use tokens?

Thanks for your time.

Upvotes: 4

Views: 2756

Answers (1)

Felix
Felix

Reputation: 10078

We've been in this process for last 6 months (the only difference is Angular, rather than Angular 2). And here is my opinion...

a small section of the existing site which when routed to displays an Angular SPA app calling Web API for data, instead of the MVC controller and functions

Extremely difficult, if not impossible, since ASP.NET Core is fundamentally very different from MVC 4. I would suggest to have a separate site (on a different port) that runs Core and Angular.

I'm not planning on using ASP.NET MVC features such as the shared layout page, bundling, routing etc, preferring to instead leave this to angular.

That was our first approach, but in order to accomplish it, we would need to pre-load a lot of Javascript libraries, or do smart things for dynamic loading. It is easier in Angular2 (SystemJS that allows dynamic loading is built into the infrastructure). Instead, we split the application into about half-dozen features. Each feature has a .NET controller and a single view (Index.cshtml). Within the feature we use Angular capabilities for routing, views, etc. This approach also helped us to have strongly typed views.

Should I use separate projects, or a whole separate solution on a new domain which accesses the same db?

Entity Framework is also quite different. In our old (very old) solution we didn't use EF at all, so it was an easier decision. But even if you do use EF in current solution, EF Core is also a different animal, including the way it does migrations. It was much easier for us to have a clean cut.

How to I handles authentication and authorisation?

Our old system was using membership framework, and we didn't have anybody on the team familiar with OAuth. So, while waiting for IdentityServer 4 (that currently has almost no documentation), I suggest you consider SaaS solutions like StormPath or Auth0 (we love StormPath). If you have experience with IdentityServer, you may jump into IdentityServer 4. Since we are using MVC, our authentication is very straightforward; but I think AJAX-based authentication wouldn't be that much more difficult.

Hope that helps. SO doesn't like "opinion-based" questions - but I think there are a lot of teams struggling with this type of transition, and hopefully, this question and answer are appropriate :)

Upvotes: 4

Related Questions