Ngx-translate 给出 404 错误 Nativescript angular

Question

我正在使用 Ngx-translate 和 Nativescript-Angular。我使用 ngx-translate 的原因是我需要能够在运行时更改语言。

错误：

CONSOLE ERROR file:///node_modules/@angular/core/fesm5/core.js:4002:0:ERROR{ 
   "headers":{ 
      "normalizedNames":{ 

      },
      "lazyUpdate":null,
      "headers":{ 

      }
   },
   "status":404,
   "statusText":"ERROR",
   "url":"/var/mobile/Containers/Data/Application/A1B491BE-90BB-4C1E-BF1D-48C6BC398167/Library/Application Support/LiveSync/app/assets/i18n/ko-KR.json",
   "ok":false,
   "name":"HttpErrorResponse",
   "message":"Http failure response for /var/mobile/Containers/Data/Application/A1B491BE-90BB-4C1E-BF1D-48C6BC398167/Library/Application Support/LiveSync/app/assets/i18n/ko-KR.json: 404 ERROR",
   "error":"Not Found"
}

文件夹结构：

src

app

app.module.ts

assets

i18n

class

custom-translation.handler.ts

factories

http-loader.factories.ts

app.module.ts

TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: httpLoaderFactory,
                deps: [HttpClient]
            },
            missingTranslationHandler: {
                provide: MissingTranslationHandler,
                useClass: CustomTranslationHandler
            }
        })

自定义-translation.handler.ts

import { MissingTranslationHandler, MissingTranslationHandlerParams } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/internal/operators';


export class CustomTranslationHandler implements MissingTranslationHandler {
    handle(params: MissingTranslationHandlerParams): string | Observable<string> {
        const defaultContext = '@COMMON';
        const missingContext = 'TRANSLATE:';
        const translationKeyArray = params.key.split('.');

        if (
            translationKeyArray[0] === defaultContext ||
            translationKeyArray[1] === missingContext
        ) {
            return params.key;
        }

        translationKeyArray[0] = defaultContext;
        const newTranslationKey = translationKeyArray.join('.');
        return params.translateService
            .get(newTranslationKey, params.interpolateParams)
            .pipe(
                map(v => (v === newTranslationKey ? missingContext + params.key : v))
            );
    }
}

http-loader.factories.ts

import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

组件中的示例翻译：

<Button text="{{ tc + '.CONFIRM' | translate }}"></Button>

其中 tc 等于 START-UP

我的 i18n.json 文件的设置：

{
    "@COMMON": {
        "TITLE": "확정하다"
    },
    "START-UP": {
        "CONFIRM": "확정하다"
    }
}

WebpackConfig

new CopyWebpackPlugin([
                { from: { glob: "fonts/**" } },
                { from: { glob: "**/*.+(jpg|png)" } },
                { from: { glob: "assets/**/*" } },
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

Answer 1

我认为绝对路径在 TranslateHttpLoader.

中无法正常工作

尝试使用这样的相对路径：TranslateHttpLoader(http, './assets/i18n/');

Answer 2

我需要添加以下规则

{ from: { glob: "assets/i18n/*.json"} } 到 WebpackConfig

因此 Webpackconfig 将如下所示：


new CopyWebpackPlugin([
                { from: { glob: "fonts/**" } },
                { from: { glob: "**/*.+(jpg|png)" } },
                { from: { glob: "assets/**/*" } },
                { from: { glob: "assets/i18n/*.json"} },
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

Ngx-translate 给出 404 错误 Nativescript angular

Ngx-translate giving 404 error Nativescript angular

nativescript

ngx-translate

nativescript-angular

angular