9

I am developing a project that involves multiple Single Page Applications that are hosted on a single .Net Core 1.0 web app.

The goal is to partition each SPA so that they all exist separately, each with their own View and Controller.

In Startup.cs, am using Microsoft.AspNetCore.SpaServices MapSpaFallbackRoute to pass off the deep links to the SPAs (in this case Angular 2), so MVC doesn't get confused and throw a 404 on page refresh.

I have it working for one SPA at a time when I set the Controller manually in MapSpaFallbackRoute, but I can't figure out a way set it conditionally for each SPA Controller.

I'm assuming that a combination of Mapwhen() and Run() will get me where I need to be, but I can't seem to get the syntax correct.

Assuming the SPAs are named 'Dash1', 'Dash2', etc. The following fallback route works perfectly for Dash1:

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

            routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Dash1", action = "Index" });
        });

I've tried this:

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

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

    }

    private static void HandleDash1(IApplicationBuilder app)
    {
        app.UseMvc(routes =>
        {
            routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Dash1", action = "Index" });
        });
    }
}

...But then when I navigate to Dash1 and try to refresh the page, the browser prepends '/Dash1/' to all of the http requests and breaks everything.

2
  • Totally guessing here, but have you tried routes.MapSpaFallbackRoute("{controller}/spa-fallback", new { action = "Index" }); in your first approach? Oct 5, 2016 at 9:36
  • I gave it a try but still getting 404s on page refresh. The first string param is just the name of the route, but it seems like it should be possible to do it that way; just register the current Controller as the fallback.
    – David
    Oct 6, 2016 at 13:54

1 Answer 1

21

I got it to work with MapWhen(), but each SPA will have to be registered this way.

app.MapWhen(context => context.Request.Path.Value.StartsWith("/Dash1"), builder =>
{
    builder.UseMvc(routes =>
    {
        routes.MapSpaFallbackRoute("dash1-fallback", new { controller = "Dash1", action = "Index" });
    });
});

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

I am using this method to host Angular(2+) apps. I was originally using SystemJS and keeping all of the apps in one project, but I moved to Angular CLI when version 4 was released.

The best way I've found to manage the apps is to create a separate project in the solution for each app and use NPM scripts to copy the bundled files into a folder inside wwwroot of the "master" project.

Instead of returning a View, I'm just serving the static html file created by the CLI but Views work fine too.

public IActionResult Index()
{
    return PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/dash1", "index.html"), "text/HTML");
}

The tricky part is managing the routers. You must set the base href and hand off routing to the Angular router by setting window['_app_base'] to correspond to the current controller's route.

Include the following in index.html:

<head>
    // Set base href. 
    // You need to include the path if serving the static file from wwwroot
    // Use '/' if using a View (I think, I had to change this when I switched to static files).

    <base href="/dash1/"> 

    <script>
        (function () {
            // You could type the controller path here again but this will infer it.

            window['_app_base'] = '/' + window.location.pathname.split('/')[1];

        })();
    </script>
</head>

Then, the Angular router has to get it's bearings from the window['_app_base']. In the app.module.ts include the following:

import { NgModule, Provider } from '@angular/core';
import { APP_BASE_HREF, Location } from '@angular/common';
const baseHref: Provider = {
    provide: APP_BASE_HREF,
    useValue: window['_app_base'] || '/'
};

Finally, Include baseHref in the providers array of @NgModule.

5
  • David, I am struggling to understand how to create separate Angular 2 applications within a single ASP.Net Core MVC application. Would you be willing to provide some insight please?
    – TDC
    Feb 28, 2017 at 12:53
  • Hi TDC. I updated the post with a bit more information. I'm using SystemJS instead of Webpack, and there are a lot of new build features available that I haven't yet learned. I saw your question regarding the new Angular template available on Nuget, but this method is not compatible with Webpack, so I updated this answer here. Hope it helps.
    – David
    Feb 28, 2017 at 20:47
  • Thank you David for the clarification, most appreciated. I need to spend some time understanding how this all fits together. I can't decide if integrating Angular within ASP.Net Core is advantageous or completely distracting (polite phrase).
    – TDC
    Mar 1, 2017 at 17:55
  • This is appreciated. I wonder if multiple projects for each angular app is needed though.I think the process could be simplified by having a single angular project and code splitting features.
    – Mike Lunn
    Jan 29, 2018 at 16:43
  • A separate.net project per SPA is not a requirement. With SystemJS I didn't have any issues at all. The Angular CLI has the ability to manage multiple apps per project, I think, but I haven't tried. I found it easier to develop frontend apps locally using mock controllers in dedicated projects, than having to manage the mock environments in source control of one project. It could be done that way, and there may be a compelling argument for it.
    – David
    Jan 29, 2018 at 18:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.