I am having an issue such that I am unable to reference typescript objects created from imported json files in oracle jet. From an examination of the web console logs, the json file is not being found at runtime.
Below is an outline of my development environment, errors received and steps that can be used to reproduce the error.
A) Development Environment
Oracle JET Version: 7.2.0
Typescript Version: 3.6.4
IDE: Visual Studio 1.39.2
Operating System: Windows 10
B) Error Received
I receive the following error when I try to reference the imported json object. Following is part of the log (highlighting the error) from the browsers web console. This happens when we run the project.
..........
http://localhost:8000/css/alta/7.2.0/web/alta.css [HTTP/1.1 200 OK 0ms]
GET http://localhost:8000/js/libs/oj/v7.2.0/resources/nls/ojtranslations.js [HTTP/1.1 304 Not Modified 6ms]
GET http://localhost:8000/js/libs/require/text.js [HTTP/1.1 304 Not Modified 7ms]
GET http://localhost:8000/js/viewModels/dashboard.js [HTTP/1.1 304 Not Modified 12ms]
GET http://localhost:8000/js/viewModels/jdata.json.js [HTTP/1.1 404 Not Found 9ms]
..........
The resource from “http://localhost:8000/js/viewModels/jdata.json.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff). localhost:8000
Error: Script error for "viewModels/jdata.json", needed by: viewModels/dashboard
https://requirejs.org/docs/errors.html#scripterror require.js:168:17
..........
C) Steps to Reproduce
Following are the steps to reproduce;
1) Created Sample Project
ojet create AppTst --template=navdrawer --typescript
2) Edited ./Apptst/tsconfig.json to add json support
{ "compileOnSave": true,
"compilerOptions": {
"allowJs": true,
"alwaysStrict": false,
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"target": "es5",
"noEmitOnError": true,
"module": "amd",
"checkJs": false,
"sourceMap": true,
"baseUrl": ".",
"moduleResolution": "node",
"resolveJsonModule": true,
"esModuleInterop": true,
"paths": {
"ojs/*":["./node_modules/@oracle/oraclejet/dist/types/*"],
"knockout": ["./node_modules/knockout"]
},
"lib": ["dom","es5","scripthost", "es2015.core","es2015.collection","es2015","esnext.asynciterable"]
},
"include": [
"./src/ts/**/*"
]
}
3) Created json file ./src/ts/viewmodels/jdata.json with the following content
{
"id": 2902,
"code": "cd202",
"value": "28929"
}
4) Added code to the dashboard.ts module to import the json file
import jsondata from './jdata.json';
class DashboardViewModel {
constructor() {
}
.........
5) Referenced imported object
import jsondata from './jdata.json';
class DashboardViewModel {
constructor() {
console.log("code=" + jsondata.code);
}
.........
6) Serve the Project (on the terminal)
cd AppTst
ojet serve
Can Anyone Help?
Kind Regards,
Richard