The nativescript-localize do not translate or localize - nativescript-angular

Question

I've create a new app using the template below command:
tns create my-blank-ng --template tns-template-blank-ng
I've installed the plugin doing
go to app folder:
cd my-blank-ng
open the vs code editor:
code .
inside the vs code open a terminal and execute the command below to instal the nativescript-localize plugin (https://market.nativescript.org/plugins/nativescript-localize#how-to-set-the-default-language)
tns plugin add nativescript-localize
following the instructions from here https://market.nativescript.org/plugins/nativescript-localize#how-to-set-the-default-language I've created a new folder i18n inside the folder app (src/app/i18n) and corresponding language files en.json and fr.default.js as described on the guide having the content:
en.json
{
"app.name": "My app EN",
"hello.world": "Hello world ! Hello world TRANSLATED!"
}
fr.default.json
{
"app.name": "My app FR",
"hello": {
"world": "Bonjour le monde ! Hello world !"
}
}
also, the home.module.ts looks like:
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptLocalizeModule } from "nativescript-localize/angular";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
#NgModule({
imports: [
NativeScriptCommonModule,
HomeRoutingModule,
NativeScriptLocalizeModule
],
declarations: [
HomeComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class HomeModule { }
home.component.ts
import { Component, OnInit } from "#angular/core";
import { localize } from "nativescript-localize";
#Component({
selector: "Home",
templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
constructor() {
// Use the component constructor to inject providers.
console.log(localize("Hello world !"));
}
ngOnInit(): void {
// Init your component properties here.
}
}
home.component.html
<ActionBar title="{{ 'app.name' | L }}"></ActionBar>
<StackLayout>
<!-- Add your page content here -->
<Label text="{{ 'Hello world !' | L }}" ></Label>
<Label text="{{ 'I am %s' | L:'user name' }}" ></Label>
</StackLayout>
additionally please get the package.json
{
"nativescript": {
"id": "org.nativescript.myblankng",
"tns-android": {
"version": "6.3.1"
},
"tns-ios": {
"version": "6.3.0"
}
},
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"dependencies": {
"#angular/animations": "~8.2.0",
"#angular/common": "~8.2.0",
"#angular/compiler": "~8.2.0",
"#angular/core": "~8.2.0",
"#angular/forms": "~8.2.0",
"#angular/platform-browser": "~8.2.0",
"#angular/platform-browser-dynamic": "~8.2.0",
"#angular/router": "~8.2.0",
"#nativescript/theme": "~2.2.1",
"nativescript-angular": "~8.20.3",
"nativescript-localize": "^4.2.1",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.4.0",
"tns-core-modules": "~6.3.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular/compiler-cli": "~8.2.0",
"#ngtools/webpack": "~8.2.0",
"nativescript-dev-webpack": "~1.4.0",
"typescript": "~3.5.3"
},
"gitHead": "fa98f785df3fba482e5e2a0c76f4be1fa6dc7a14",
"readme": "NativeScript Application"
}
BUT THE RESULT IS disappointing : NO translation :(
What I'm doing wrong?
It seems the en.json is not funded (the locale of the simulator is en)
please see the image attached as well

Answer 1

add in app.module.js
import { NativeScriptLocalizeModule } from "nativescript-localize/angular";
....
imports: [
NativeScriptLocalizeModule
],
in actionbar
<ActionBar class="action-bar">
<Label>
<Span class="action-bar-title" text="{{ 'app.name' | L }}" >
</Span>
</Label>
</ActionBar>
in stack layout
<StackLayout>
<Label text="{{ 'hello.world' | L }}" ></Label>
</StackLayout>

Answer 2

try to put the i18n Folder one level up.
For example:
src>i18n
it worked for me.