Ngx-перевод дает 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
  • класс
    • custom-translation.handler.ts
  • фабрики
    • http-loader.factories.ts

app.module.ts

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

custom-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>

Где t c равно ЗАПУСКУ

Настройка моего файла 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

Мне нужно было добавить следующее правило

{ 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)}/**`] }),

Answer 2

Я думаю, что абсолютный путь не работает правильно в TranslateHttpLoader .

Попробуйте использовать относительный путь следующим образом: TranslateHttpLoader (http, './assets/i18n/');