Angular 6 multi-language and .NET Core 2.1

Question

I'am trying make an Angular multi-language application inside .NET Core 2.1 To serve in others idioms. I use app.Map to run diferents npmScripts in my Startup.cs

app.Map("/fr-FR", spaFr =>
{
    spaFr.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";
        spa.Options.DefaultPage = $"/fr-FR/index.html";
        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start:fr"); 
        }
    });
});
app.UseSpa(spa =>
{
     spa.Options.SourcePath = "ClientApp";
     spa.Options.DefaultPage = $"/index.html";
     if (env.IsDevelopment())
     {
         spa.UseAngularCliServer(npmScript: "start");
     }
});

So

http://localhost:52337 serve the app in English

http://localhost:52337/fr-FR serve the app in France

But when I write http://localhost:52337/fr-FR the application can not find the bundles files: styles.a006ff9ecb31fc360851.css, runtime.a66f828dca56eeb90e02.js, polyfills.662173b507c7bb60d452.js and main.ddceca57cc95aeab5c91.js

And .NET can not find the files because it are looking for in http://localhost:52337/, but the files are in http://localhost:52337/fr-FR

My package.json has the scripts

"start": "ng serve",
"start:fr": "ng serve --serve-path=/ --base-href=/fr-FR --configuration=fr",

And I've added in the angular.json in configuration

"production-fr": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "outputPath": "dist/fr-FR/",
  "i18nFile": "src/i18n/messages.fr.xlf",
  "i18nFormat": "xlf",
  "i18nLocale": "fr",
  "i18nMissingTranslation": "error"
},
"fr": {
  "aot": true,
  "outputHashing": "all",
  "serve-path":"/fr-FR/",
  "i18nFile": "src/i18n/messages.fr.xlf",
  "i18nFormat": "xlf",
  "i18nLocale": "fr",
  "i18nMissingTranslation": "error"
}

I think that I made all the possibles combinations in scripts, with or wihout --serve-path, --deploy-url, --base-href ... but I can make this work in development environment. What can happen?

Congrats on reaching the all time list in Angular!!!! Keep rocking!!!!! — Naren Murali, Jun 24 '23 at 02:35

score 1 · Accepted Answer · answered Jul 22 '18 at 10:24

1

thank's to How to configure ASP.net Core server routing for multiple SPAs hosted with SpaServices

the solution is simple, use serve-path=/, and don't forget the / final in --base-href

so the scripts in package.json becomes like

"scripts": {
    ...
    "start": "ng serve",
    "start:fr": "ng serve --base-href=/fr-FR/ --configuration=fr --serve-path=/",
    ...
  },

answered Jul 22 '18 at 10:24

Eliseo

50,109
4
29
67

@LeonardoChaia I realize this thread is old, but in the `package.json` you would define the build to use the configuration "production-fr". Then, as part of publishing with .NET you would then add a call to `npm build:fr`, which will publish the dist/fr-FR/ folder and the `Map` in Startup will ensure to serve the `index.html` from that folder if the url starts with /fr-FR/. – Jeppe Apr 22 '20 at 17:56

Angular 6 multi-language and .NET Core 2.1

1 Answers1