AngularJs Routing, MVC6/vNext/.NET5 and MVC View

Question

All the examples of using AngularJs with MVC6/vNext/.NET5 all use a static index.html file that is within the wwwroot. Done that, but i now need to load an MVC index.cshtml page instead so i can inject settings that are in my config.json onto the page.

All i want is a default page (Home), that is loaded not matter what url is requested, provided that url is not to a js/css file or to an api controller.

I have tried adding this to my Configure(IApplicationBuilder app, IServiceProvider serviceProvider) method, but now, my js and css files all pull back the Home/Index.cshtml file

app.UseMvc(options =>
{
    options.MapRoute("Api",
        template: "api/{version}/{controller}/{action?}",
        defaults: new { version = "v1", controller = "Page" });

    options.MapRoute(
        name: "default",
        template: "{*url}",
        defaults: new { controller = "Home", action = "Index" });
});

My application loads up on the default address http://localhost:port, there is no extra folder to start with. Via angularJs, users can go to urls such as

http://localhost:6000/page
http://localhost:6000/page/9
http://localhost:6000/another
http://localhost:6000/another/9/sub

All these should load the Home/Index.cshtml page, and let angular take over routing.

I have seen an option to add something to web.config file, but i will not be using IIS so this is not an option

EDIT If i update my routes to this, it seem to load the page and all js/css files, which is great. But if i try to go directly to a angular route, nothing loads.

app.UseMvc(options =>
{
    options.MapRoute("Api",
        template: "api/{version}/{controller}/{action?}",
        defaults: new { version = "v1", controller = "Page" });

    options.MapRoute(
        name: "default",
        template: "{controller}/{action?}",
        defaults: new { controller = "Home", action = "Index" });
});

EDIT 2

public void Configure(IApplicationBuilder app, IServiceProvider serviceProvider)
{
    // add automapper registrations
    app.RegisterMappingFiles();

    // Enable all static file middleware
    app.UseStaticFiles();

    // Enable Mvc for controllers
    app.UseMvc(options =>
    {
        options.MapRoute(
            name: "default",
            template: "{controller}/{action?}",
            defaults: new { controller = "Home", action = "Index" });
    });

}

Are you sure all URL's should map to the home page within MVC? Maybe it would be better to only map that one controller/action. Any other URL should get redirected with an HTTP response to the correct URL to the action? — mason
– mason, Commented Oct 15, 2015 at 13:17
I just want users to be able to load an angular route, like /pages/9 and that will load the Home/index.cshtml page, and then angular will load the correct route on the client — Gillardo
– Gillardo, Commented Oct 15, 2015 at 14:19

Stas Boyarincev · Accepted Answer · 2015-10-15 13:19:53Z

3

I think, you have not added using Static Files in your request pipeline, therefore request against them, processed MVC routing:

    public void Configure(IApplicationBuilder app, ILoggerFactory loggerFactory)
    {
        app.UseStaticFiles();

        app.UseMvc(options =>
        {
            options.MapRoute("Api",
        template: "api/{version}/{controller}/{action?}",
        defaults: new { version = "v1", controller = "Page" });

            options.MapRoute(
                name: "default",
                template: "{*url}",
                defaults: new { controller = "Home", action = "Index" });
        });

    }

Your invoke app.UseStaticFiles() have to be located before invoke app.UseMvc(), that requests to static files don't reached routing middleware, since invokes middlewares perfomed in registration order.

Documentaion on docs.asp.net

edited Oct 15, 2015 at 13:19

answered Oct 15, 2015 at 12:21

Stas Boyarincev

4,12027 silver badges26 bronze badges

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

7 Comments

Gillardo Over a year ago

This works on initial load, but if i navigate to a client route like http://localhost/pages/9 then nothing works and i get a 404 error

Stas Boyarincev Over a year ago

Have you used "{*url}" route template? I've used (in my example) wrong template ("{controller}/{action?}")

Stas Boyarincev Over a year ago

Does your invoke app.UseStaticFiles() located before invoke app.UseMvc() ? It have to be located before, that requests to static files don't reached routing middleware.

Stas Boyarincev Over a year ago

template: "{controller}/{action?}", - use route template template: "{*url}", that consume requests like http://localhost/pages/9 too.

Pylyp Lebediev Over a year ago

In addition, I had to add <base href="/" /> in <head> of my page.

|

Collectives™ on Stack Overflow

AngularJs Routing, MVC6/vNext/.NET5 and MVC View

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related