typescripttwincattwincat-hmi

How to import json file into TcHMI script?


I have JSON files in my TwinCAT HMI project which I would like to use in my HMI scripts. The project is typescript based, but it's little relevant I think. What I've tried is to place temperature-namings.json file next to .ts file and call this in the script:

import test = require("temperature-namings.json");
// or (also with ./ path prefix)
import test from "temperature-namings.json";

Build:Cannot find module 'temperature-namings.json' or its corresponding type declarations.

I've tried to use path specifiers such as .. but intellisense doesn't show this file. I have an impression that it's filtering types, since json files are part of script function ecosystem. So I've placed my json into Imports, but still can't import it.

I also tried to put the following into tsconfig file:

"resolveJsonModule": true,
"esModuleInterop": true,

But then another error pops up:

Build:Option '--resolveJsonModule' cannot be specified without 'node' module resolution

How can I place JSON file inside TwinCAT HMI project and read the content from my custom .ts functions?


Solution

  • TcHMI until version 12.760.xx does not support module scripts. The JS files are added with simple script/text tag, and not as <script type=module>.

    This means in the browser you can use import, as this is a special feature of module type script.

    The whole system is configured around text type scripts, and there is no option to use node module resolution. Thats why you don't see any import or export in the whole project.

    Solution to your problem is to use simple fetch function to fetch this JSON file from server into browser. You can simply use

    fetch('temperature-namings.json', data => { console.log(data) });