Angular 2 routing with ASP .Net Core (non-mvc)

Question

I'm trying to set up routing with .net core and Angular 2 but the routes do not resolve because they are resolved by the server.

One solution I have seen is to register a default route to your home controller or something... but I don't have any MVC controllers.

I've added this to my main component (and done all the other router prerequisites)

@RouteConfig([
    { path: '/', name: 'Table', component: TableComp, useAsDefault: true },
    { path: '/login', name: 'Login', component: LoginComp }
])

And I do have these in startup.cs:

within ConfigureServices()

services.AddMvc();

within Configure()

app.UseMvc();

But since I'm not actually using any MVC Controllers or registering any MVC routes, I'm at a loss as to how to get my angular routes to resolve in the browser rather than the server, and why they aren't just doing the thing...

I suggest using a single MVC controller to serve a single Index.cshtml view. This allows you to take advantage of asp.net built in routing and tag helpers. — Eric B
– Eric B, Commented Jul 22, 2016 at 19:49

Fábio Junqueira · Accepted Answer · 2016-07-22 17:26:31Z

14

The following configuration should fit most projects using client side routing in .NET Core:

DefaultFilesOptions options = new DefaultFilesOptions();
options.DefaultFileNames.Clear();
options.DefaultFileNames.Add("index.html");

app.Use(async (context, next) =>
{
    await next();

    if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
    {
        context.Request.Path = "/index.html";
        await next();
    }
})
.UseCors("AllowAll")
.UseMvc()
.UseDefaultFiles(options)
.UseStaticFiles();

answered Jul 22, 2016 at 17:26

Fábio Junqueira

2,77723 silver badges20 bronze badges

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

4 Comments

Bryan Over a year ago

Would this be added to the RouteConfig or something? Or what file would I add this to?

jperez Over a year ago

Tested and works. This also works without UseCors and UseMvc.

jperez Over a year ago

@Brett this should be added in de Startup.Configure method variable app is the IApplicationBuilder

Andy Over a year ago

Just a note, if anyone is confused: Path comes from System.IO namespace.

David Pine · Accepted Answer · 2016-07-22 17:38:45Z

1

You are looking for the Microsoft.AspNetCore.SpaServices found in this github repo. Look for this example.

app.UseStaticFiles();

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

    routes.MapSpaFallbackRoute(
        name: "spa-fallback",
        defaults: new { controller = "Home", action = "Index" });
});

There is an older post here with some previous versions, but the setup should be very similar.

answered Jul 22, 2016 at 17:38

David Pine

24.6k11 gold badges82 silver badges113 bronze badges

Comments

dr11 · Accepted Answer · 2016-07-22 17:48:53Z

0

Try this example Asp Core + Angular2 + Swashbuckle + Docker.

It uses UseMvc() for C# API controllers. And UseStaticFiles() to serve AngularJs (and other static) files.

So you're running Asp Core backend as service. Using Webpack you can build AngularJs application from Typescript source code. It will be published to public folder Backend looks to serve statics from.

answered Jul 22, 2016 at 17:48

dr11

5,80613 gold badges41 silver badges84 bronze badges

Comments

TTCG · Accepted Answer · 2017-01-15 00:43:54Z

0

I put index.html in wwwroot and use DefaultFiles() in start up page. The webserver knows and finds the default file - index.html automatically.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {

        app.UseDefaultFiles();
        app.UseStaticFiles();

        app.UseMvc();
    }

answered Jan 15, 2017 at 0:43

TTCG

9,15133 gold badges96 silver badges151 bronze badges

Collectives™ on Stack Overflow

Angular 2 routing with ASP .Net Core (non-mvc)

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related