json-server won't accept your recipes.json

[dwschulze]

Both ways of running json-server fail:

$ npm run server:start

recipes-rest-api@1.0.0 server:start nodemon server.js

/tmp/serverstart-b7e2ce34.sh: 1: /tmp/serverstart-b7e2ce34.sh: nodemon: not found

$ json-server --watch db-json/recipes.json

{^_^}/ hi!

Loading db-json/recipes.json Done Error: Data must be an object. Found object.See https://github.com/typicode/json-server for example. at module.exports (/home/dean/.nvm/versions/node/v16.17.0/lib/node_modules/json-server/lib/server/router/validate-data.js:16:11) at Object.module.exports [as router] (/home/dean/.nvm/versions/node/v16.17.0/lib/node_modules/json-server/lib/server/router/index.js:46:3) at createApp (/home/dean/.nvm/versions/node/v16.17.0/lib/node_modules/json-server/lib/cli/run.js:52:29) at /home/dean/.nvm/versions/node/v16.17.0/lib/node_modules/json-server/lib/cli/run.js:134:13

[dwschulze]

After some trouble shooting I'm down to this. Your server.js can't find json-server even though it is installed (via nvm) and working:

$ npm run server:start

recipes-rest-api@1.0.0 server:start nodemon server.js

[nodemon] 2.0.19 [nodemon] to restart at any time, enter rs [nodemon] watching path(s): . [nodemon] watching extensions: js,mjs,json [nodemon] starting node server.js node:internal/modules/cjs/loader:959 throw err; ^

Error: Cannot find module 'json-server' Require stack:

• /home/dean/Downloads/src/Reactive-Patterns-with-RxJS-for-Angular/Chapter04/recipes-book-api/server.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15) at Function.Module._load (node:internal/modules/cjs/loader:804:27) at Module.require (node:internal/modules/cjs/loader:1028:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (/home/dean/Downloads/src/Reactive-Patterns-with-RxJS-for-Angular/Chapter04/recipes-book-api/server.js:2:20) at Module._compile (node:internal/modules/cjs/loader:1126:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10) at Module.load (node:internal/modules/cjs/loader:1004:32) at Function.Module._load (node:internal/modules/cjs/loader:839:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) { code: 'MODULE_NOT_FOUND', requireStack: [ '/home/dean/Downloads/src/Reactive-Patterns-with-RxJS-for-Angular/Chapter04/recipes-book-api/server.js' ] } [nodemon] app crashed - waiting for file changes before starting... ^C

[everjava]

it worked for me: npm install -g json-server npm install npm run server:start http://localhost:3001/api/recipes

[tarikk34]

I was also able to get data from /api/recipes however at the end of chapter 4 where they show the example output I am not able to match Figure 4.4. Below is my console log of error that it is seeing

[tarikk34]

I was also able to get data from /api/recipes however at the end of chapter 4 where they show the example output I am not able to match Figure 4.4. Below is my console log of error that it is seeing

[tarikk34]

I was able to resolve my issue. With the following 2 methods and 1 general method to fix issues:

General method: where ever you see a package.json file when you clone the repo make sure you update it manually with the latest versions (in VS code if you hover over the version it will tell you latest). Second, then run npm install in that same directory (you need to do this for recipes-book-front and recipes-book-api).

Method 1: Once I forked this repo to my own space I did not run into any issues and was able to run the server and the front end.

Method 2: (running from this cloned project) I had issues with injections not being defined so I had to update recipe-list and recipe.server to below

export class RecipesListComponent implements OnInit {
  public recipes!: Recipe[];
  constructor(private service: RecipesService) {}
  public recipes$!: Observable<Recipe[]>;
  public destroy$ = new Subject<void>();

  ngOnInit(): void {
    this.recipes$ = this.service.recipes$;
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, timer } from 'rxjs';
import { Recipe } from '../model/recipe.model';
// import { delayWhen, retryWhen, tap} from 'rxjs/operators'
import { environment } from 'src/environments/environment';
const BASE_PATH = environment.basePath

@Injectable({
  providedIn: 'root'
})

export class RecipesService {
  public recipes$: Observable<Recipe[]>;

  constructor(private http: HttpClient) { 
    this.recipes$ = this.http.get<Recipe[]>(`${BASE_PATH}/recipes`);

  }
}