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).

buymeacoffee · Accepted Answer · 2023-02-28 07:46:38Z

0

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");
    }
});

answered Feb 28, 2023 at 7:46

buymeacoffee

22.7k2 gold badges23 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Volia Over a year ago

You are right maybe. It's possible I can not understand you. But please explain me HOW Exactly I can integrate existing MVC application with Angular SPA page. If I use you recipe I see in browser ONLY Angular application. I don't see anything from my existing MVC application, How exactly I can move my existing <DIV> block from various *.chtml to Angular application? I need COMBINE existing MVC application with SPA and create a couple components as Angular component.

Volia Over a year ago

You recipe allow OVERWRITE and FULL REPLACE ASP.NET MVC application to Angular SPA application. But nobody has interesting to this task, problem is EMBED and INCLUDE a couple of Angular component to MVC project. I don't see anything in browser, there is nothing my site, there is nothing Swagger description, I see ONLY SPA Angular component.

Volia Over a year ago

MVC site is a compiled DLL + some scripts defined in _layout page. SPA page is script only. How you combined MVC (DLL + script) with SPA (script only)? You recipe allow start Angular ONLY application without VS CODE and starting Node.JS manually, this start included to Spa.UseAngularCliServer - this is only a way to avoid start NG SERVE manually, no more, isn't it?

buymeacoffee Over a year ago

@Volia Yes, This requirement of yours probably wasn't a very good idea in the first place.

Volia Over a year ago

You are right, maybe. This means current web technology is idiotic, isn't it? If we can see to Web development as common process to develop active content - WHY I can not embed active JS components (Angular) to MVC View? Why I can not create full MVC project and than one component create only with JS (Angular). Why exactly? There is only one reason - idiotic idea of MVC technology and even more idiotic Idea of full JS technology (Angular) than can not mixing one to another.

Collectives™ on Stack Overflow

How to host Razor partial view in Angular instead IIS

1 Answer 1

Question 1

Question 2

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Question 1

Question 2

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related