How to load json from asset directory in new version of angular

Ionic Framework ionic-v3
1

the common answer below isn’t working.
Whatever works don’t work in the apk .
I keep getting below errors with different configurations (loading file to loading using http)

  • errors from CORS
  • ERROR TypeError: Cannot read property ‘subscribe’ of undefined
  • Could not read response

old answer

this.http.get(link).map(res => res.json()).subscribe((data) => {
			console.log(data, "data");
		},
		err => {
			console.log(err, "err");
		})

loading from file

this.file.readAsText(this.url, endpoint).then((data) => {

      this.core.log(data);
      let myObservable = Observable.create(observer => {
        observer.next(data);
      });
    }).catch(err => console.log(err));
return myObservable;

and the regular loading using http

observable = this.http.get("/android_asset/www/assets/mocks/file.json", reqOpts);
observable = this.http.get("/assets/mocks/file.json", reqOpts);

nothing works on device

2

Not sure, but there seems an RXJS version issue under the hood

3

This one works for me, and should be preferred over all the others.

4

If your json file is in the assets folder, as in the example above, then it is sitting on your server and not on some website outside of your server - i.e. you have access to the json file. In that case, you do not need to make an http request at all, just add

    "resolveJsonModule": true,

to your tsconfig.json and in your code use

import * as Config from './config.json';

(if your json file is named config.json and it is sitting in the same folder as the code that uses it, otherwise, use a relative path to the json file within your project). You can then refer to the json object as a regular javascript object assigned to the variable Config.