Ngx-translate to 404 error 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
  • 资产
    • 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>

tc等于启动时

我的i18n.json文件的设置：

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

Answer 1

我认为绝对路径在TranslateHttpLoader中无法正常工作。

尝试使用这样的相对路径：TranslateHttpLoader（http，'./assets/i18n /'）;