使用Angular8迁移到Nativescript6后ngx-translate无法正常工作

时间:2019-07-23 20:09:44

标签: angular nativescript nativescript-angular ngx-translate

将应用程序迁移到Nativescript6(自动迁移)后出现此问题。现在,翻译无法正常进行,在启动时在控制台中,我会看到这种错误:

JS: ERROR SyntaxError: Unexpected end of JSON input

但我不确定该问题来自何方。

我在此工具中运行lang json文件,结果很好:https://www.jslint.com/

我的package.json是:

{
  "nativescript": {
    "id": "com.company.app",
    "tns-ios": {
      "version": "6.0.1"
    },
    "tns-android": {
      "version": "6.0.0"
    }
  },
  "description": "my app name",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "scripts": {
    "lint": "tslint \"src/**/*.ts\""
  },
  "dependencies": {
    "@angular/animations": "8.0.0",
    "@angular/common": "8.0.0",
    "@angular/compiler": "8.0.0",
    "@angular/core": "8.0.0",
    "@angular/forms": "8.0.0",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "8.0.0",
    "@angular/platform-browser-dynamic": "8.0.0",
    "@angular/router": "8.0.0",
    "@danvick/ngx-translate-nativescript-loader": "^2.0.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nstudio/nativescript-checkbox": "^1.0.0",
    "@types/jest": "^23.3.9",
    "angular-font-awesome": "^3.1.2",
    "base-64": "^0.1.0",
    "font-awesome": "^4.7.0",
    "messageformat": "^2.0.2",
    "nativescript-angular": "8.0.2",
    "nativescript-bitmap-factory": "^1.7.1",
    "nativescript-dialog": "^0.1.0",
    "nativescript-fontawesome": "^1.0.0",
    "nativescript-ios-uuid": "^1.0.0",
    "nativescript-localstorage": "^2.0.0",
    "nativescript-ng2-fonticon": "^1.3.4",
    "nativescript-open-app": "^0.2.0",
    "nativescript-permissions": "^1.2.3",
    "nativescript-platform-css": "^1.6.6",
    "nativescript-plugin-firebase": "9.0.2",
    "nativescript-social-share": "^1.5.1",
    "nativescript-telephony": "^1.0.4",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-toast": "^2.0.0",
    "nativescript-ui-sidedrawer": "7.0.0",
    "nativescript-version-number": "^1.1.0",
    "ngx-translate-messageformat-compiler": "^4.5.0",
    "reflect-metadata": "~0.1.10",
    "rxjs": "^6.3.3",
    "tns-core-modules": "6.0.1",
    "ts-md5": "^1.2.4",
    "utf8": "^3.0.0",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "8.0.0",
    "@nativescript/schematics": "~0.3.0",
    "@ngtools/webpack": "8.0.0",
    "codelyzer": "~4.5.0",
    "css-loader": "^3.1.0",
    "nativescript-dev-webpack": "1.0.1",
    "node-sass": "4.12.0",
    "style-loader": "^0.23.1",
    "tslint": "~5.11.0",
    "typescript": "3.4.5"
  },
  "readme": "NativeScript Application",
  "author": "my company"
}

我的app.module.ts:

import { HttpClientModule } from "@angular/common/http";
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptLoader } from "@danvick/ngx-translate-nativescript-loader";
import { TranslateLoader, TranslateModule  } from "@ngx-translate/core";
import { TNSCheckBoxModule } from "@nstudio/nativescript-checkbox/angular";
import { AngularFontAwesomeModule } from "angular-font-awesome";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

export function createTranslateLoader() {
    return new NativeScriptLoader("./assets/i18n/", ".json");
}

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        AppRoutingModule,
        HttpClientModule,
        NativeScriptModule,
        AngularFontAwesomeModule,
        NativeScriptUISideDrawerModule,
        TNSCheckBoxModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader
            }
        })
    ],
    exports: [
        TranslateModule,
        TNSCheckBoxModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

并且json文件位于´/ assets / i18n / en.json´(外部应用程序文件夹)中

一件奇怪的事情是,当我使用调试器进行检查时,在chrome控制台的文件浏览器中,en.json文件为空,就好像没有从资产文件中复制文件一样。

在迁移到nativescript 6.0之前,这是完美的工作方式

1 个答案:

答案 0 :(得分:0)

您必须在webpack.config.js中更新CopyWebpackPlugin以包含资产文件夹

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