Angular 6 多语言和 .NET Core 2.1答案

【问题标题】：Angular 6 multi-language and .NET Core 2.1Angular 6 多语言和 .NET Core 2.1
【发布时间】：2018-07-22 18:24:36
【问题描述】：

我正在尝试在 .NET Core 2.1 中创建一个 Angular 多语言应用程序用其他成语服务。我使用 app.Map 在我的 Startup.cs 中运行不同的 npmScripts

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");
     }
});

所以

http://localhost:52337 为应用提供英文服务

http://localhost:52337/fr-FR在法国为应用提供服务

但是当我写http://localhost:52337/fr-FR 时，应用程序找不到捆绑文件：styles.a006ff9ecb31fc360851.css、runtime.a66f828dca56eeb90e02.js、polyfills.662173b507c7bb60d452.js 和 main.ddceca57cc95aeab5c91.js

而.NET 找不到文件，因为它在http://localhost:52337/ 中寻找，但文件在http://localhost:52337/fr-FR 中

我的 package.json 有脚本

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

我已经在配置中的 angular.json 中添加了

"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"
}

我认为我在脚本中进行了所有可能的组合，使用或不使用 --serve-path、--deploy-url、--base-href ...但我可以在开发环境中完成这项工作。会发生什么？

【问题讨论】：

标签： angular .net-core-2.1

【解决方案1】：

感谢How to configure ASP.net Core server routing for multiple SPAs hosted with SpaServices

解决方法很简单，使用serve-path=/，别忘了--base-href中的/final

所以 package.json 中的脚本变成了

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

【讨论】：

@LeonardoChaia 我意识到这个线程很旧，但是在package.json 中，您可以定义构建以使用配置“production-fr”。然后，作为使用 .NET 发布的一部分，您将添加对 npm build:fr 的调用，这将发布 dist/fr-FR/ 文件夹，并且 Startup 中的 Map 将确保从该文件夹中提供 index.html，如果网址以 /fr-FR/ 开头。