locked
How to add Mvc middleware in SPA template project of Visual Studio RRS feed

  • Question

  • User-1045336983 posted

    Hi, I have created Angular SPA project using the build in templates of visual studio. I want to add mvc middle ware in such a way that when I run my SPA Project, it should first load Index.cshtml that I am routing through Index() of HomeController. There already seems to be MVC middleware, but when I add Index.cshtml there, it still loads my angular project. So can anyone help me in figuring this out?

    This is my Startup.cs

     
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
                app.UseSpaStaticFiles();
    
                app.UseMvc(routes =>
                {
                    routes.MapRoute(
                        name: "default",
                        template: "{controller}/{action=Index}/{id?}");
                });
    
                app.UseSpa(spa =>
                {
                    // To learn more about options for serving an Angular SPA from ASP.NET Core,
                    // see https://go.microsoft.com/fwlink/?linkid=864501
    
                    spa.Options.SourcePath = "ClientApp";
    
                    if (env.IsDevelopment())
                    {
                        spa.UseAngularCliServer(npmScript: "start");
                    }
                });
            }

    Tuesday, August 27, 2019 6:14 PM

Answers

  • User711641945 posted

    Hi Test1233@,

    Test1233@

    app.UseMvc(routes =>
                {
                    routes.MapRoute(
                        name: "default",
                        template: "{controller}/{action=Index}/{id?}");
                });

    You need to change this code like below:

    app.UseMvc(routes =>
          {
               routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
               // add a special route for our index page
               routes.MapSpaFallbackRoute(
                    name: "spa-fallback",
                    defaults: new { controller = "Home", action = "index" });
          });

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 28, 2019 3:18 AM

All replies

  • Tuesday, August 27, 2019 6:42 PM
  • User-474980206 posted
    Your angular builds a static index.html file in the /ClientApp/public folder that is the application. The UseSpaStaticFiles() adds a static file handler that looks in this folder first, then passes to next router if not found. The spa services routes an empty url to this file.

    You angular app should be making Ajax calls to mvc actions. What is the use case of index.cshtml?

    I don’t use angular (react instead), but angular routing should have a way to route to a mvc page rather local angular component.
    Wednesday, August 28, 2019 12:20 AM
  • User711641945 posted

    Hi Test1233@,

    Test1233@

    app.UseMvc(routes =>
                {
                    routes.MapRoute(
                        name: "default",
                        template: "{controller}/{action=Index}/{id?}");
                });

    You need to change this code like below:

    app.UseMvc(routes =>
          {
               routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
               // add a special route for our index page
               routes.MapSpaFallbackRoute(
                    name: "spa-fallback",
                    defaults: new { controller = "Home", action = "index" });
          });

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 28, 2019 3:18 AM