Angular 7生产环境构建i18n文件未找到。

Question

我正在尝试部署一个使用ngx-translate和位于/dist/assets文件夹中的翻译语言文件的Angular 7应用程序。我在构建中指定了正确的基本href。部署后，我看到所有内容都加载了，但语言文件返回错误代码404（未找到）。

我尝试过以几种不同的方式更改angular.json文件。我尝试更改TranslateHttpLoader，但似乎没有任何效果。我可以看到在/dist文件夹中有包含所有语言文件的i18n文件夹。然而，它没有被引用。

在app.module.ts中：

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

在 angular.json 文件中。

"assets": [
  "src/favicon.ico",
  "src/assets"
],

但我在浏览器中得到了以下错误：

/assets/i18n/en.json 404未找到

希望能得到帮助！

- npabs18

Answer 1

在 Angular 9.0.4 中，我遇到了相同的问题。

只有当路径以点斜杠前缀 ./assets/i18n/ 时，该问题才会得到解决：

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/');
}

- Stephane

---

TranslateHttpLoader的默认前缀是'/assets/i18n/'，因此在使用不同的baseHref时，这是一个必需的步骤。https://github.com/ngx-translate/http-loader#usage - Carsten

谢谢兄弟！我为此苦苦挣扎了将近一个小时，如果不是你的帮助，我觉得可能要花上好几天哈哈。 - undefined

Answer 2

我和你遇到了同样的问题， 在我的本地IIS服务器上它完美地工作了，但是在实时的IIS服务器上会抛出404错误（i18n / en.json未找到404）。

我不断地尝试解决这个问题，认为这是一个angular i18n路径错误。 最终发现这是服务器问题。

默认情况下，IIS服务器只允许少数文件扩展名类型。 您必须手动添加Web.config文件中json文件的MimeType。

<staticContent>
  <remove fileExtension=".json"/>
  <mimeMap fileExtension=".json" mimeType="application/json"/>
</staticContent>

我把这个添加到了Web配置文件中（如果文件不存在，您必须在网站根目录中创建它）。

不用谢...

- gamal

---

也帮了我很大的忙，我一直在使用Azure Web应用程序，尝试了其他所有选项，只有这个对我有效。 - Alex

Answer 3

我面临着和你一样的问题，我相信它与这个命令有关：

ng build --prod

尝试使用以下命令：

ng build --base-href=/deployed_app_name/ --prod

例如，如果您的已部署应用程序名称为：stackoverflow，则命令应该像这样：

ng build --base-href=/stackoverflow/ --prod

在这里，您将获得指向i18n json文件的正确路径

- Ramzi Guetiti

Answer 4

你已经导入到 AppModule 中了吗？

export function HttpLoaderFactory(httpClient: HttpClient) {
    return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

- Tan Nguyen

---

谢谢您的回复。是的，我已经在AppModule中导入了。就像您在代码片段中展示的那样。但仍然无法正常工作。 - npabs18

请确保您的资产文件夹位于此级别：/src/assets/您是否使用angular-cli？ - Tan Nguyen

是的，我正在使用Angular-CLI。当我运行ng build --prod时，dist文件夹会在/dist/<project_name>/assets处创建带有资产文件夹的构建。我不应该以这种方式部署应用程序结构吗？在构建之前，应用程序的资产文件夹位于/src/assets中，就像你提到的那样。 - npabs18

Answer 5

这是我解决类似问题所采取的路径：

1. 检查404错误文件是否在dist文件夹正确的路径下，如果不是，请确认angular.json中所有资产参数是否正确。
2. 验证base-ref参数：
   • https://stackoverflow.com/a/53236676/5419823
   • 什么是angular-cli工具的--base-href和--deploy-url参数之间的区别
3. 并查看您在environment.prod.ts（或environment.ts等）的i18n参数中是否有正确的值

- sikmowe

Answer 6

这是一个旧的帖子，但即使在运行IIS的Azure应用程序服务上部署Angular 15仍然存在问题。 引用任何json配置文件（例如i18n中的文件）或 woff / woff2字体默认情况下将404。 任何子路由上的重定向和刷新也将失败。 您应该在Angular项目的根目录中包含web.config。 下面的web.config似乎适用于json，woff，woff2和重定向 -

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
      </staticContent>
    <rewrite>
      <rules>
        <rule name="redirect_all_requests" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false"/>
          </conditions>
          <action type="Rewrite" url="index.html" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

希望这能帮助到某个人。

- tpankake