5 Replies Latest reply on Nov 1, 2019 1:43 PM by Duncan Mills-Oracle

    Unable to use Imported JSON file in Oracle Jet Typescript Project

    er0

      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