Angular 6-json文件无法针对生产环境进行编译

Question

I have a json file imported into my component (app.component.ts)

import data_json from '../assets/json/general.json';

But when I try to generate the production version using the following command I get an error:

ng build prod

This is the error:

ERROR in src/app/app.component.ts(12,23): error TS2307: Cannot find module '../assets/json/general.json'.

If I launch ng serve, it gives me a warning in the console, but it does not give me an error, I access the browser and I see the json loaded correctly

With HTTP, ng build --prod compile fine, but my browser console shows the next error:

core.js:1521 ERROR TypeError: Cannot read property 'menu' of undefined
    at Object.eval [as updateDirectives] (AppComponent.ngfactory.js:414)
    at Object.updateDirectives (core.js:10494)
    at checkAndUpdateView (core.js:10147)
    at callViewAction (core.js:10388)
    at execComponentViewsAction (core.js:10330)
    at Object.checkAndUpdateView (core.js:10153)
    at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (core.js:8534)
    at core.js:4411
    at Array.forEach (<anonymous>)
    at ApplicationRef.push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick (core.js:4411)

This is my json file (general.json)

{
  "imgsesion": "fa_closesesion.png",
  "texthome": "volver a la home",
  "logo": "fa_logo.png",
  "contact": "fainfo@gmail.com",
  "menu": {
    "background": "orange",
    "link1": "ESCRITOR",
    "link2": "MÚSICO",
    "link3": "AYUDA ADMIN",
    "submenu": {
      "link1": {
        "text1": "novelas",
        "text2": "obras de teatro"
      },
      "link2": {
        "text1": "compositor",
        "text2": "intérprete"
      }
    }
  }
}

How can I solve it?

Answer 1

You need to fetch the JSON file via HTTP if you don't want to parse the file until runtime. But I guess that doesn't make much sense.

See this for more information on how to load JSON:

https://stackoverflow.com/a/39410788/4521733