Question

我只是尝试在ngx-translate（i18n）库上创建一个多语言NativeScript应用程序，我知道NPM上还有其他一些插件，但是它们都有一些问题或者不支持Angular 5，所以我决定使用它图书馆

我只是在nativescript-angular角度模板上创建简单的应用程序并实施ngx-translate到我的项目并在app根文件夹中设置我的JSON文件

./assets/i18n/

但是一旦我运行我的项目，我就会遇到一些错误

System.err: java.net.MalformedURLException: no protocol: ./assets/i18n/en.json

和其他错误

JS: ERROR Error: Uncaught (in promise): [object Object]

这是Package.json文件

中的依赖项

"dependencies": {
    "@angular/animations": "~5.2.1",
    "@angular/common": "~5.2.1",
    "@angular/compiler": "~5.2.1",
    "@angular/core": "~5.2.1",
    "@angular/forms": "~5.2.1",
    "@angular/http": "~5.2.1",
    "@angular/platform-browser": "~5.2.1",
    "@angular/platform-browser-dynamic": "~5.2.1",
    "@angular/router": "~5.2.1",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "nativescript-angular": "~5.2.0",
    "nativescript-barcodescanner": "2.7.4",
    "nativescript-cardview": "2.0.5",
    "nativescript-fancyalert": "^1.1.2",
    "nativescript-feedback": "^1.1.0",
    "nativescript-google-maps-sdk": "^2.4.3",
    "nativescript-pro-ui": "~3.3.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~5.5.5",
    "tns-core-modules": "~3.4.0",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~5.2.1",
    "@ngtools/webpack": "~1.9.1",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "codelyzer": "~4.0.2",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "~1.3.5",
    "nativescript-dev-typescript": "~0.6.0",
    "nativescript-dev-webpack": "~0.9.0",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "sass-loader": "~6.0.6",
    "tslint": "~5.9.1",
    "typescript": "~2.6.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0"
  }
}

这是我的app.module.ts文件

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";


//Plugins
import { NSModuleFactoryLoader } from "nativescript-angular/router";
import { BarcodeScanner } from 'nativescript-barcodescanner';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';


import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

import { NativeScriptHttpModule } from "nativescript-angular/http";
import { HttpClientModule, HttpClient } from '@angular/common/http';



import * as platform from "platform";
declare var GMSServices: any;

if (platform.isIOS) {
    GMSServices.provideAPIKey("XXX");
}

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

//Data service
// import { DataService } from './shared/dataService/dataService'

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        HttpClientModule,
        NativeScriptHttpModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        })
    ],
    declarations: [
        AppComponent
    ],
    providers: [BarcodeScanner,
        { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

和TranslateService文件

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app',
    template: `
        <div>{{ 'HELLO' | translate:param }}</div>
    `
})
export class AppComponent {
    param = {value: 'world'};

    constructor(translate: TranslateService) {
        // this language will be used as a fallback when a translation isn't found in the current language
        translate.setDefaultLang('en');

         // the lang to use, if the lang isn't available, it will use the current loader to get them
        translate.use('en');
    }
}

我只搜索每个地方但我无法在@ angular / common / http和ngx-translate以及NativeScriptHttpModule上找到Nativescript Angular 5应用程序的任何示例你能不能请一些人帮助我，我真的很困惑谢谢

Answer 1

It works for me with Angular 7 and NativeScript code-sharing feature.

The first problem with your example is that you should remove "." form the path to your assets. It should be:

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

For me, this resolved the java.net.MalformedURLException, but I also had to change webpack configuration to grab my translations files (eg. /assets/i18n/en.json), so in your webpack.config.js modify this section:

// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
   { from: { glob: "fonts/**" } },
   { from: { glob: "**/*.json" } },
   { from: { glob: "**/*.jpg" } },
   { from: { glob: "**/*.png" } },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

Check my GitHub repo

Answer 2

ngx翻译有效的“本机角度”：“〜8.20.3”，

使用@ danvick / ngx-translate-nativescript-loader插件（将json文件从http修改为本地getfile）

https://market.nativescript.org/plugins/@danvick%2Fngx-translate-nativescript-loader

请注意不要安装@ ngx-translate / http-loader。当尝试使用http访问language.json时，会出现错误，请使用上述插件中的@ danvick / ngx-translate-nativescript-loader从应用程序文件夹语言json文件中获取将json文件直接放在资产文件夹中（我的示例）然后在app.module中

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { NativeScriptLoader } from '@danvick/ngx-translate-nativescript-loader';
...
export function createTranslateLoader() {
    return new NativeScriptLoader("./assets/", ".json");
}

imports: [
        AppRoutingModule,
        NativeScriptModule,
        NativeScriptUISideDrawerModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader
            }
        }),

    ],

修改webpack.config.js以将“ lang” .json复制到应用程序（默认情况下，本地将仅将字体，png文件和jpg文件复制到app资源文件夹）通过添加以下行{from：{glob：“ assets / **”}}}，在其中放置语言json（是否在i18n文件夹内）-检查json文件是否在platform / ios | android / nameofapp / assets文件夹内复制< / p>

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

Answer 3

Nic Raboy

有一个很好的教程

https://www.thepolyglotdeveloper.com/2017/01/internationalization-nativescript-mobile-app-angular/

我可以确认它可以在NativeScript 5.4上运行

但是我绝对建议您使用Nic文章中使用的ngx-translate插入ng2-translate。

@ ngx-translate Nativescript / Angular application

3 个答案: