Using JSON Server with Angular application configurations

angular.json

// This is a partial example of the angular.json to show the new mock section under serve

"serve": { 
  "builder": "@angular-devkit/build-angular:dev-server", 
  "configurations": { 
    "production": { 
      "buildTarget": "json-server-demo:build:production" 
    }, 
    "development": { 
      "buildTarget": "json-server-demo:build:development" 
    }, 
    "mock": { 
      "buildTarget": "json-server-demo:build:development", 
      "proxyConfig": "./mocks/proxy.config.json" 
    } 
  }, 
  "defaultConfiguration": "development" 
},

db.json

{ 
  "dateResponse": "2000-01-01", 
  "arrayResponse": [1, 2, 3, 4], 
  "saveResponse": { 
    "success": true 
  }, 
  "textsDetails": [ 
    { 
      "id": 1, 
      "texts": "first" 
    }, 
    { 
      "id": 2, 
      "text": "second" 
    } 
  ] 
} 

middleware.js

module.exports = (req, res, next) => { 
  if (req.method === 'POST') { 
    req.method = 'GET'; 
  } 

  if (req.url === '/api/demo/special') { 
    res.json(generateResponse()); 
    return; 
  } 

  next(); 
}; 

function generateResponse() { 
  const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; 

  let weeks = []; 
  let days = []; 

  for (let i = 0; i < 7; i++) { 
    const dayOfWeek = daysOfWeek[i]; 
    days.push({title: dayOfWeek}); 
  } 

  for (let i = 1; i <= 52; i++) { 
    weeks.push({title: `Week ${i}`, days}); 
  } 

  return { 
    weeks 
  }; 
} 

package.json

// add this to the scripts section to make running JSON Server easy

"start:json-server": "json-server --watch mocks/db.json --routes mocks/routes.json --middlewares mocks/middleware.js"

proxy.config.json

{ 
  "/api": { 
    "target": "http://localhost:3000" 
  } 
} 

routes.json

{ 
  "/api/demo/date": "/dateResponse",
  "/api/demo/array": "/arrayResponse",
  "/api/demo/save": "/saveResponse",
  "/api/demo/texts/:id": "/textsDetails/:id"
}