Visual Studio 2017 and angular integration

Question

This is a fundamental question, but I would like to understand how Visual Studio handles Angular projects.

By using the Angular template provided within Visual Studio 2017 (C#), can you please explain how an angular application works?

• For the development environment, I believe Visual Studio runs two servers: one is IIS for the Web API calls, and the other one is the node.js for the Angular project (am I right?)

• However, in the development environment the application uses the address of the Web API project (e.g. localhost:5000) instead of Angular application address provided by the node.js (e.g. localhost:66328). How does this happen?

• What about the production environment? Both the Web API (C#) and the Angular work within IIS?

• How about if the Angular project is developed outside of Visual Studio such using Eclipse/Visual Studio Code/Webstorm? How can I integrate the two projects for production purposes?

I know these are very basic questions but will be glad if you can provide answers / references / links.

Answer 1

The magic is not done in Visual Studio. The magic is done in .NET.

That's why you can create and develop ASP.NET Core Angular projects on Mac, with VS Code or even vim!

To simplify, what ASP.NET Core does is:

• In development, they redirect all URLs to the output of ng serve, but this happens after all routes all added, so that URLs going to controllers would still work
• In production, they redirect these URLs to a static file handler, that looks at the dist folder, where the result of ng build is added.

The code is not entirely hidden from you.
See the Startup.cs file from the project template which I used as source for above.

They also use the ASP.NET Node services (.NET <-> Node interop) to implement server-side rendering. This means if you use that, you need Node on the server. See server-side rendering docs for details.

The same docs page also points out how they have an optional proxy for development in case you wanted to run ng serve manually, that just proxies (sends) all the URLs (after all routes checked against the URL and not matched) to the Angular development server.

Answer 2

I use VS Code for all of my Angular development, so I can't answer the first part of your question. Consider consulting the Microsoft docs on the Angular template here: https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-2.2&tabs=visual-studio

I can answer the last part of your question.

How about if the angular project is developed outside of the visual studio such using eclipse/visual code/web storm? How can I integrate the two projects for production purposes?

You can build your Angular application for production. This generates several packages and other files (such as the index.html file) into a dist folder. You can then take those files and deploy them to your IIS or whatever server you use for production.

You can find some general information here:

https://angular.io/guide/deployment

Though it is mostly general and not specific to a particular server, it does have some specific instructions for IIS.

And be sure to follow the instructions here: https://angular.io/guide/deployment#the-base-tag to set the base tag to the appropriate IIS folder.