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

应用程序模块.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 等于 START-UP

我的 i18n.json 文件的设置:

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

网络包配置

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