0

In my Angular2 application, the organization of the folders is as below

Project
 |
 +-- file 1
 |    
 +-- api //folder
 |   |  
 |   | +-- listOfProducts //folder
 |          |
            +-- products.json //file 
 +-- src //folder
 |  |  
 +  | +-- app //folder
          | +-- product //folder
                 +-- product.service.ts
                 +-- product-list.component.ts
                 +-- //other files

Now after I run my application I got the following error

GET http://localhost:4200/api/listOfProducts/products.json 404 (Not Found)

how can I access my JSON file? I've tried to move it to Assets folder like:

Project

src/assets/api/listOfProducts/products.json //file 

and I try to access the same URL but it remains the same. This is my angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "ang03"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

so what should I do so I can access my JSON file? thanks.

10
  • You can try moving json files into assets folder or moving api folder into src folder, and add api into assets array. Commented Aug 23, 2017 at 7:49
  • I think found the problem I suppose to access the file like localhost:4200/assets/api/listOfProducts/products.json but is it possible to remove the assets so I can just access it like localhost:4200/api/listOfProducts/products.json? Commented Aug 23, 2017 at 7:53
  • No, that's not possible. You root folder is src based on your angular-cli.json, files outside won't be served. Commented Aug 23, 2017 at 7:54
  • but I hear that we can configure it in webpack configuration if I'm not mistaken? but I'm not sure how to do it. Commented Aug 23, 2017 at 7:58
  • no; i guess local json file can be served from assets folder only. I had faced similar problem, then I moved my local json file in assets folder Commented Aug 23, 2017 at 7:58

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.