未找到 Angular 7 prod 构建 i18n 文件答案

【问题标题】：Angular 7 prod build i18n files not found未找到 Angular 7 prod 构建 i18n 文件
【发布时间】：2019-10-08 02:52:32
【问题描述】：

我正在尝试在 /dist/assets 文件夹中部署一个使用 ngx-translate 和翻译语言文件的 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 未找到

任何帮助将不胜感激！

【问题讨论】：

标签： angular7 ngx-translate ng-build

【解决方案1】：

在Angular 9.0.4 我遇到了同样的问题。

只有当我在路径中有一个点斜杠前缀为./assets/i18n/ 时，问题才会得到解决：

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

【讨论】：

TranslateHttpLoader 的默认前缀是 '/assets/i18n/'，因此在使用不同的 baseHref 时需要执行此步骤。 github.com/ngx-translate/http-loader#usage

【解决方案2】：

我遇到了和你一样的问题，在我的情况下，它在我的本地 IIS 服务器上运行得非常好，但它会为实时 IIS 服务器抛出 404（未找到 i18n/en.json 404）。

我转来转去，认为这是一个角度 i18n 路径错误。最后归结为服务器问题。

默认情况下，IIS 服务器只允许少数文件扩展名类型。您必须手动为 json 文件添加 mimeType（来自网络配置文件）。

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

我将此添加到一个网络配置文件中（如果文件不存在，您必须在网站根文件夹中创建它）。

欢迎您...

【讨论】：

也帮助了我，正在使用 azure web 应用程序，尝试了所有其他选项。只有这对我有用。

【解决方案3】：

我遇到了和你一样的问题，我相信它与这个命令有关：

ng build --prod

尝试使用这个命令：

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

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

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

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

【讨论】：

【解决方案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 { }

【讨论】：

感谢您的回复。是的，我已经导入了 AppModule。就像您在 sn-p 中显示的那样。还是不行。
确保你的 assets 文件夹在这个级别：/src/assets/ 你在使用 angular-cli 吗？
是的，我正在使用 Angular-CLI。当我运行 ng build --prod 时，dist 文件夹使用 /dist//assets 的 assets 文件夹创建构建。我不应该以这种方式部署应用程序结构吗？我构建之前的应用程序的资产文件夹位于 /src/assets 中，就像你提到的那样

【解决方案5】：

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

检查404错误的文件是否在dist文件夹正确路径，如果没有，确认angular.json中所有assets参数是否正常。
验证 base-ref 参数为：
- https://stackoverflow.com/a/53236676/5419823
- What's the difference between --base-href and --deploy-url parameters of angular-cli tool
看看你在 environment.prod.ts（或 environment.ts 等）的 i18n 参数中是否有正确的值

【讨论】：