Angular plus Web API (OWIN) minus MVC 5

Subject

Perhaps you already know that you can use the command line interface (English Command Line Interface, CLI) to create the project on Angular. And that when using this method, a project is created that uses an http server based on node.js. There is another way to create an application project on Angular that uses dotnet, that is, the ASP.NET Core platform.

I would like to offer you another way that is based on the use of ASP.NET MVC 5. Surely you can object to me that this is a common way - to run Visual Studio, select the Web API and create through the CLI a new application, Angular. To this I can say the following - when you create a SPA on ASP.NET MVC 5, you will get an onther artifacts of MVC 5 (controllers, razor and other things) that you will never use on Angular-application. I'm a little tired to remove those things from projects and therefore created a simple and, in my opinion, very useful nuget-package, which will greatly facilitate this task.

Creating a Angular application on Web API

First, we need create an empty project.

Select this settings:

Notice that you should not enable any parameters, just empty project.

Done. Next we should install nuget-package. I use the Package Manager Console, but you can use UI:

PM> install-package Calabonga.Owin.Angular

After install complete you will see new folders and files

At this point we can build our solution and see what we have. But before that we should select correct start action for the project:

Select this option if it not selected. After that we can press F5 to build and start our solution. You should see welcome screen (installed with nuget):

Works! That's great! But what about the Web API? Let's check this out. Try to navigate "http://localhost:26975/api/values". 

Notice that you address may be different than my. Visual Studio always generating port randomly. That's why your port number may be different.

It's time to create Angular application. Let's open the Comman Prompt or Powershell and execute some commands, for exsample:

Check the folder name. It is very important, because this is the root of Angular application. After Angular CLI command complete you will see somethig like that:

Now we should enable to hidden files in Visual Studio to see new files:

Select files and folders (you can use CTRL for multiple selection) shown on the screen. Please, do not include node_modules folder.

Next, we should make some changes in the Angular.json file where the Angular store settings. Update the outputPath paramter like shown below:

Go to your project folder. In my case it's a ngapi folder.

Then execute build command:

After it complete you will see something like shown below:

A new folder appers in our project. To see it you may need to refresh solution explorer:

This is the folder Angular generated. We must now configure that our project starts from this folder.To do this, open the startup file for OWIN, which is usually called Startup.cs and specify as a parameter to use the UseSinglePageApplicationOverWebApi path to our angular folder, also we should specify the html file that will be the starting point for our application:

The App folder with Index.html we can delete because it now unessasery. Now we can run the project. Press F5... Voila!

Conclusion

As you probably already guessed, by this principle you can connect not only Angular, but also any other framework for creating a Single Page Application. For example, Vue.js, Durandal.js, Aurelia, React.js, etc. I do not think that it makes sense to spread the demonstration project in GitHub, but if it's required, write in the comments.

Links

Nuget-пакет Calabonga.Owin.Angular

Working example