How to set right path to assets in NativeScript?

Question

I have loader that retrieves translate file:

export function translateLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, "/i18n/", ".json");
};

My structure project is:

/src/app/app.module.js
/src/i18n/en.json

When I launch application I get this message:

ERROR {
JS:   "headers": {
JS:     "normalizedNames": {},
JS:     "lazyUpdate": null,
JS:     "headers": {}
JS:   },
JS:   "status": 404,
JS:   "statusText": "ERROR",
JS:   "url": "/data/data/org.nativescript.App/files/app/i18n/en.json",
JS:   "ok": false,
JS:   "name": "HttpErrorResponse",
JS:   "message": "Http failure response for /data/data/org.nativescript.App/files/app/i18n/en.json: 404 ERROR",
JS:   "error": "Not Found"
JS: }

It can not find file by path /data/data/org.nativescript.App/files/app/i18n/en.json after compiling.

Where I should set path settings?

My tsConfig:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "lib": [
            "es6",
            "dom",
            "es2015.iterable"
        ],
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "platforms"
    ]
}

I have tried:

return new TranslateHttpLoader(http, "../i18n/", ".json");
return new TranslateHttpLoader(http, "./../i18n/", ".json");
return new TranslateHttpLoader(http, "i18n/", ".json");

Now I get this error:

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ERROR {
JS:   "headers": {
JS:     "normalizedNames": {},
JS:     "lazyUpdate": null,
JS:     "headers": {}
JS:   },
JS:   "status": 0,
JS:   "statusText": "Unknown Error",
JS:   "url": "./assets/i18n/en.json",
JS:   "ok": false,
JS:   "name": "HttpErrorResponse",
JS:   "message": "Http failure response for ./assets/i18n/en.json: 0 Unknown Error",
JS:   "error": {
JS:     "originalStack": "Error: java.net.MalformedURLException: no protocol: ./assets/i18n/en.json\n    at new c (file:///data/data/org.nativescript.App/files/app/vendor.js:1:1700209)\n    at file:///data/data/org.nativescript.App/files/app/vendor.js:1:1565607\n    at Object.onComplete (file:///data/data/org.nativescript.App/files/app/vendor.js:1:1566741)",
JS:     "zoneAwareStack": "Error: java.net.MalformedURLException: no protocol: ./assets/i18n/en.json\n    at new c (file:///data/data/org.nativescript.App/files/app/vendor.js:1:1700209)\n    at file:///data/data/org.nativescript.App/files/app/vendor.js:1:1565607\n    at Object.onComplete (file:///data/data/org.nativescript.App/files/app/vendor.js:1:1...

Answer 1

You must configure CopyWebpackPlugin to include the files into bundle at compile time

webpack.config.js

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

This { from: { glob: "i18n/*.json" } }, makes sure all the i18n JSON files are copied to bundle.