How to host Razor partial view in Angular instead IIS

Question

There is ancient topic How to use ASP.Net MVC View .csthml as Angular View instead of .html

I need something like this, but with Angular 15 and VS Code. And I want to develop Angular component with VS Code and ASP.NET MVC site (not Web API) must working as usually, but with Angular components. And main question - all this schema can be finally deployed to Kestrel/Apache.

So, I have something *.CSHTM partial view like this, for example UserHeader.CSHTML

<div class="main_info__menu">
    <div class="main_info__search">
        <span class="material-icons-outlined search_open">
            search
        </span>
        <div class="main_info__search_body search_wrap">
            <input type="search" id="main-site-search">
            <div class="search_close"></div>
        </div>
    </div>
    <div class="main_info__menu_icon">
        <span class="material-icons-outlined">
            dialpad
        </span>
    </div>
    <div class="main_info__notification">
        <div class="notification_button">
            <span class="material-icons-outlined">
                notifications
            </span>
            <span id="notif_counter">15</span>
        </div>
    </div>
</div>

I want to split this partial section MVC project to a number of Angular component and continue developing this components as Angular components inside VS CODE. It's a natural and obvious desire, isn't it?

But how to do this?

My _Layout page in MVC project contains some scripts

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" ></script>
    <script src="~/canvasJS/canvasjs.stock.min.js"></script>
    <script src="~/canvasJS/jquery-ui.1.12.1.min.js"></script>
    <script src="~/scripts/swiper-bundle.min.js"></script>
    <script src="~/scripts/script.js"></script>

It need to inject to WebPack to avoid conflict with Angular scripts like this

   <script src="runtime.047cab87a7e67de1.js" type="module"></script>
   <script src="polyfills.a1e87901e73dec72.js" type="module"></script>
   <script src="main.70a8e87618517279.js" type="module"></script> 

isn't it? Or this is not need?

And how to bind Angular components (it usually worked as localhost://4200) and MVC site (it usually worked as https://localhost:7168/). How to bind this two technology in developing mode and than finally in WebServer (Kestrel/Apache).

Answer 1

Question 1

I want to split this partial section MVC project to a number of Angular component and continue developing this components as Angular components inside VS CODE. It's a natural and obvious desire, isn't it?

If the code in your .cshtml file is pure html code, yes , you can split this partial section MVC project to a number of Angular component and continue developing this components as Angular components.

If not, I mean has something like below, it will compile failed.

@page
@model ErrorModel
@{
    ViewData["Title"] = "Error";
}

If I am using pure html code.

Question 2

And how to bind Angular components (it usually worked as localhost://4200) and MVC site (it usually worked as https://localhost:7168/). How to bind this two technology in developing mode and than finally in WebServer (Kestrel/Apache).

You can create a sample spa application, and you will find it use AddSpaStaticFiles and some settings. Like:

services.AddControllersWithViews();
services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "wwwroot";
});
...
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "wwwroot";

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});