How can i use Angular i18n with ASP.NET Core 6.0 for development and production?

Viewed 80

I created an ASP.NET Core 6.0 with Angular App and implemented Angular internationalization as described in this guide.

Then I followed this tutorial and I can start my Angular app now with:

  • ng serve --configuration=de --serve-path /de
  • ng serve --configuration=en --serve-path /en

When I run npm run build --prod --localize in my Angular project it creates 2 folders (de and en) with the translations in the dist folder.

Now I want to run my application via visual studio and configure my ASP.NET Core with Angular App for development and production.

If I start my App in IIS Express the SPA proxy reloads the whole time and he can not find the Angular App. This is my proxy.conf.js:

const { env } = require("process");

const target = env.ASPNETCORE_HTTPS_PORT
  ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}`
  : env.ASPNETCORE_URLS
  ? env.ASPNETCORE_URLS.split(";")[0]
  : "http://localhost:23002";

const HttpsAgent = require("agentkeepalive").HttpsAgent;

const PROXY_CONFIG = [
  {
    context: ["/api"],
    target: target,
    secure: false,
    changeOrigin: true,
    agent: new HttpsAgent({
      maxSockets: 100,
      keepAlive: true,
      maxFreeSockets: 10,
      keepAliveMsecs: 100000,
      timeout: 6000000,
      keepAliveTimeout: 90000,
    }),
    onProxyRes: (proxyRes) => {
      const key = "www-authenticate";
      proxyRes.headers[key] =
        proxyRes.headers[key] && proxyRes.headers[key].split(",");
    },
  },
];

module.exports = PROXY_CONFIG;

In .NET 5 you could use app.UseSpa as in the example below. If I start the project in .NET 6.0 with a configuration the proxy can not find the Angular page and reloads...

Startup.cs:

var startUpLanguage = "de"; // de for deutsch, en for english

var options = new RewriteOptions().AddRedirect(@"^(?!(de\/|en\/))(.*$)", $"{startUpLanguage}/$1");
app.UseRewriter(options);

if (!env.IsDevelopment())
{
   // configure SPA for production
}
else
{
   // configure SPA for local development
   app.UseSpa(spa =>
   {
       spa.Options.SourcePath = "AngularApp";
       spa.UseAngularCliServer(npmScript: $"start-local-{startUpLanguage}");
    });
}

package.json:
"start-local-de": "ng serve --configuration=de --serve-path /de",
"start-local-en": "ng serve --configuration=en --serve-path /en",
  • How is the .NET 6 apporach for development and production?
  • How do I configure the proxy?
1 Answers

You need to install the Microsoft.AspNetCore.SpaServices.Extensions NuGet. There you have the UseSpa extension method.

Related