Webpack can't load the json file, how to locate the local json file and load that using http.get with AngularJS

Question

I am using AngularJs of ES6 syntax, I am trying to load a local themes.json file from ApiService.js

  getThemesOptions() {
    this.$http.get('src/app-builder/p3-modal/themes.json')
    .success(function(data) {
      console.log(data);
    })
    .error(function() {

    });

My file structure:

src/
  app-builder/
    p3-modal/
      themes.json
  service/
    apiService/
       apiService.js

From the console, looks like it found the file successfully, but the output is very strange,

Because themes.json looks like this:

I am running the application using Webpack, the url to access the application is not normally localhost, but http://10.98.142.233:8080/o2/search/ab instead, I don't know what cause the problem

Please tell me how to load the json file from local correctly , using AngularJs ES6 with webpack.

Thanks!

This is the network tab.

Answer 1

No, actually what happens is it can't find the JSON file, and the Webpack dev server routes the 404 back to your index.html, which is what you're seeing in the console. The success callback fires because technically, it's not a 404 but a 200 OK.

What you're doing should work so long as the Webpack dev server is serving content from the directory immediately above the src folder. I'm guessing that might not be the case.

Answer 2

您的浏览器位置是www.google.com/image ，然后当您调用ajax时，请求访问的网址是www.google.com/image/${url}但是如果在您的网址前加一个斜杠，则类似于/src/app..以及请求的网址，例如www.google.com/${url}