Cannot read propertyof undefined when importing local JSON file - Angular/Ionic - json

Question

I want to display data in an html file coming from a local json file.
My JSON looks like:
{
"ACCESSIBILITY_EXPANDED": "Expanded",
"ACCESSIBILITY_BACK": "Back",
"ACCESSIBILITY_COLLAPSED": "Collapsed",
"ACCESSIBILITY_PHONE_NUMBER": "Call us at",
"ACCESSIBILITY_EMAIL": "Email us at",
"ACCESSIBILITY_ADDRESS": "Visit us at",
"ACCESSIBILITY_FAX": "Send us a FAX at",
}
What i did so far is change my tsconfig.json to look like this:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types",
"src/typings.d.ts"
],
"lib": [
"es2018",
"dom"
],
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"esModuleInterop": true,
}
}
Added a file called in src folder called typings.d.ts which looks like this:
declare module "*.json" {
const value: any;
export default value;
}
And then in my component's .ts file i did.
import en from '../../assets/i18n/en.json';
However in my html file when i did something like
<span class="bolded"> {{ en.ACCESSIBILITY_BACK }}</span>
i got an error saying Cannot read property ACCESSIBILITY_BACK of undefined. When I console.log(en) in ngOnInit() it's logs my object fine.
Any ideas? Thanks

Answer 1

{{ en }} is a template property, so you need to assign it to a component property:
#Component({
template: '...<span class="bolded"> {{ en.ACCESSIBILITY_BACK }}</span>...'
})
export class A11yComponent {
// assigns `en` from json to a component property `en`
en = en;
}
You could also use interpolation in the template string / concatenation, but this will not be allowed with AoT compilation.