Angular 5 Universal (SSR) with dotnet core not working with i18n angular tools on Staging server

问题

I'm trying to make the Angular Project Template with dotnet core running with the I18n Angular tool. (https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio)

Here is what I have in my startup class

app.Map("/fr", fr =>
{
    fr.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";

        spa.UseSpaPrerendering(options =>
        {
            options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/fr/main.bundle.js";
            options.BootModuleBuilder = env.IsDevelopment()
                ? new AngularCliBuilder(npmScript: "build:ssr2:fr")
                : null;
            options.ExcludeUrls = new[] { "/sockjs-node" };
        });

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "serve:fr");
        }
    });
});


app.Map("/en", en =>
{
    en.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";

        spa.UseSpaPrerendering(options =>
        {
            options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/en/main.bundle.js";
            options.BootModuleBuilder = env.IsDevelopment()
                ? new AngularCliBuilder(npmScript: "build:ssr2:en")
                : null;
            options.ExcludeUrls = new[] { "/sockjs-node" };
        });

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "serve:en");
        }
    });
});

Here is my build command

"build:ssr2:en":           "npm run buildssr-i1n8-en-browser && npm run buildssr-i1n8-en-server",
"buildssr-i1n8-en-browser":"ng build --aot --locale=en --i18n-file src/i18n/messages.en.xlf --base-href=/en/ --deploy-url=/en/ --output-path=dist/en ",
"buildssr-i1n8-en-server": "ng build --aot --locale=en --i18n-file src/i18n/messages.en.xlf --output-path=dist-server/en --app=ssr --output-hashing=media",

"build:ssr2:fr":           "npm run buildssr-i1n8-fr-browser && npm run buildssr-i1n8-fr-server",
"buildssr-i1n8-fr-browser":"ng build --aot --locale=fr --i18n-file src/i18n/messages.fr.xlf --base-href=/fr/ --deploy-url=/fr/ --output-path=dist/fr",
"buildssr-i1n8-fr-server": "ng build --aot --locale=fr --i18n-file src/i18n/messages.fr.xlf --output-path=dist-server/fr --app=ssr --output-hashing=media",

"serve:fr":                "ng serve --aot --i18n-file=src/i18n/messages.fr.xlf --locale=fr --i18n-format=xlf --base-href=/fr/ ",
"serve:en":                "ng serve --aot --i18n-file=src/i18n/messages.en.xlf --locale=en --i18n-format=xlf --base-href=/en/ ",

When I'm runing it in IIS Express from visual studio, and both languages works
http://localhost:59508/en/ Working
For French
http://localhost:59508/fr/ Working

On the production server, nothing work, even if I only put English Mapping. I got this error

An unhandled exception has occurred: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request. Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.

The file is well generated in dist/fr , dist/en and dist-server/fr, dist-server/en

Any Idea why it doesn't work on my production server ? Thanks a lot

回答1:

Wow, it's was simple as add that in my startup class

spa.Options.DefaultPage = $"/en/index.html"; // for English

spa.Options.DefaultPage = $"/fr/index.html"; // for French

回答2:

To complete Jean-Francois question these 2 settings worked for me

First:

app.UseSpa(spa =>
{
  spa.Options.DefaultPage = $"/hr/index.html"; // Default language to use
});

Second:

app.Map("/en", en =>
{
  en.UseSpa(spa =>
  {
      spa.Options.DefaultPage = $"/en/index.html";
  });
});

app.Map("/hr", hr =>
{
  hr.UseSpa(spa =>
    {
        spa.Options.DefaultPage = $"/hr/index.html";
    });
});

First one was better becouse it automatically redirects to default language set in angular.json file and its shorter :P. Example uses angular 7 with built options like said above. Trick is to set the baseHref to folder location.

来源：https://stackoverflow.com/questions/48754386/angular-5-universal-ssr-with-dotnet-core-not-working-with-i18n-angular-tools-o

标签

angular-ui-router

internationalization

angular-universal

ssr