Angular app, Inside an Asp.Net Core Project, pros & cons

Question

I would like to create a Single Page Web App with Angular but I couldn't decide to project type. (Just generated files by tools like angular-cli or that generated files inside an Asp.Net Core Project)

I got some question.

• What are the advantages and disadvantages of building angular app on ASP.NET Core Project?

• Which cases I should prefer to locate angular app inside a ASP.NET Core Project?

Politesse

This question is very opinion based... For example I like to keep it separate, others may think differently. – Bogle

I have the exact same question. I have made a simple proof of concept app with the Angular template in VS 2017 on top of ASP.Net Core. My impression is that the app get bloated and the debug version of the app is more than 3 MB in size. In my case I have not written any server side code at all, ASP.Net is maybe redundant? Server side rendering, I don't know if that is running. I don't think this question/answers is opinion based. Just list the facts, ie the benefits of using ASP.Net Core with Angular. – Johanson

Answer 1

I'd like to take a stab at this. I'll agree that the answer is on some part opinion based though.

I have just been comparing the two versions for a new project that I am involved in.

First some facts

• The Angular project created inside of the ASP.Net core application is in no way dependant on the .Net code. You can navigate to the directory and type ng serve and run it by itself.

• You can copy the angular code to another directory or repo and host it by itself if you for some reason later on decide that you don't want to combine it. All you have to do is copy paste the angular code, and then remove some lines in startup.cs regarding the internal hosting.

• The code that gets added inside of the asp net core template is close to the base angular app with a few examples added on.

• If you use the login functionality template it implements an oidc client, and an identity server on the back end, (opinion) pretty much the same way I would have done it myself. There is nothing stopping you from rewriting it if you don't like it. At worst it's a good example of how it can be done.

• As of today the template is using Angular 8.0.0, you can just change the package.json to get the latest version and run npm install. It works great.

• You can still use Visual Studio Code for the Angular parts with a combined project.

Here are when Id choose the different versions (warning opinions ahead).

When to choose the asp.net core angular project.

• Small web app with limited functionality.
• Small team, probably same person writing angular code as api code.
• If you are unsure. You can always split later.

When to choose separate apps.

• Big team with deployment builds and automation.
• If you want to host angular and asp.net core separately (for reasons such as to achieve maximum performance and load balancing in apps with thousands of visitors).
• Separate people coding angular and asp.net
• You don't like having it all in same repo and want to split it up.
• In a bigger teams and contexts with multiple APIs you will probably have to deal with CORS anyways, but if not you will have to at least think about it for this to work.
• If you are unsure, you can always combine it to one app later.

Messroom

Have you ever experienced the "splitting later" part? My main concern is about hotfixing the backend when using the asp.net core angular project. – Jerrome

I actually started in a recent project with the combined template version. And after 2 months we split the Angular out to a different folder and removed it from asp net core completely. Took about 2 hours before it was buildable, and maybe another hour before we had gone through it and removed all the un-needed code. – Messroom

The reason we split was that I got annoyed at the integration and building of angular inside the asp net core pipeline. I wanted it separate. And also wanted to be able to deploy angular without deploying the backend again. – Messroom

This is exactly why I want to do that also. Have you by any chance written or blogged about all the steps needed to get there? – Jerrome

Unfortunately not. Haven't had the time. What I did was simple. Deleted the app from dot net core (copied the contens else were first), removed all the SPA things from Startup.cs. Created a new angular project and copy pasted all the components, and then edited the app.modules to work again. Our project wasent huge though so it was all done in a matter of a few hours. – Messroom

The reason I rewrote the module and also package.json was that I did not like all the extras that Microsoft added to it. And wanted a clean installation where I added things that I knew I needed and removed all other parts untill proven that I needed them too. I probably removed well over 10 packages and made the build time faster and produced smaller files. – Messroom