how to fix In-Memory Angular display error 404

Question

I watched all the videos about the In-memory web API and I followed all the steps and instruction but I still have a 404 Error. Please Let me know If I missed something. I've been tried to fix this and find research about this but failed.

MY .TS

    this.serialForm = this.fb.group({
      id:[0],
      itemCode:['', Validators.required],
      qtyReceived:[0, Validators.required],
      inputs: this.fb.array([this.CreateArray()]),
    });
    this.serialForm.get('qtyReceived').valueChanges.subscribe((res) => {
      for (let i = this.displayArray.length; i < res; i++) {
        this.displayArray.push(this.CreateArray());
        console.log(this.displayArray);
      }
    });
    this.dataValues = this.serialForm.get('qtyReceived').setValue(this.data.qtyReceived),
    this.dataValues = this.serialForm.get('itemCode').setValue(this.data.propertyNo)
  

  }

  get displayArray():FormArray{
    return this.serialForm.get('inputs') as FormArray;
  }
  CreateArray():FormGroup{
    return new FormGroup({
      serialNum: new FormControl('', {validators: [Validators.required]}),
    });
  }
  onSave(): void {
   if(this.serialForm.valid){
    this.service.add(this.serialForm.value).subscribe((res)=>{
      console.log(res)
    })
   }
  }

HTML

<mat-dialog-content>
  <form [formGroup]="serialForm">
    <mat-form-field class="full-width" floatLabel="always" appearance="outline" [hidden]="true">
      <mat-label>Id</mat-label>
      <input matInput type="text" formControlName="id">
    </mat-form-field>
    <div class ="row">
      <div class="col">
        <mat-form-field class="full-width">
          <mat-label>Item</mat-label>
          <input matInput type="text" formControlName="itemCode" readonly="true">
        </mat-form-field>
      </div>
      <div class="col-sm-2">
        <mat-form-field class="full-width">
          <mat-label>Serial Per Qty</mat-label>
          <input matInput type="number" formControlName="qtyReceived" readonly="true">
        </mat-form-field>
      </div>
    </div>
    <div
      *ngFor="let addressGroup of serialForm.get('inputs')['controls']; let i = index"
      [formGroup]="addressGroup"
    >
      <div class="row">{{i + 1}}<div> <input type="text" formControlName="serialNum" style="width:685px"></div>
      </div>
    </div>


    <div class="d-flex justify-content-center button-row">
      <button mat-raised-button color="primary" class="button" (click)="onSave()" [disabled]="serialForm.invalid">
        <mat-icon>check_circle_outline</mat-icon>
        {{actionBtn}}
      </button>
      <button mat-raised-button color="warn" class="button">
        <mat-icon>clear_all</mat-icon>
        Clear
      </button>
    </div>
  </form> 

In-Memory Web Api i try the console.log(user) but it wont see in my console. is that normal or do i need something to show this up?

@Injectable({
  providedIn: 'root'
})
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const users = [ 
      { id: 11, itemCode: 'ICT000000211', qtyReceived:0, inputs:[{
        serialNum:'string'
      }] },
      { id: 12, itemCode: 'ICT000000212', qtyReceived:0, inputs:[{
        serialNum:'string'
      }] },
      { id: 13, itemCode: 'ICT000000213', qtyReceived:0, inputs:[{
        serialNum:'string'
      }] },
      { id: 14, itemCode: 'ICT000000214', qtyReceived:0, inputs:[{
        serialNum:'string'
      }] },
      { id: 15, itemCode: 'ICT000000215', qtyReceived:0, inputs:[{
        serialNum:'string'
      }] },
      { id: 16, itemCode: 'ICT000000216', qtyReceived:0, input:[{
        serialNum:'string'
      }] },
    ];
    console.log(users)
    return { users };
  }
}

Services

export class SerialCodeService {
private tempUrl = 'api/users';
  constructor(private http: HttpClient, private appsetting:AppSettings) { }

  getHeroes(){
    return this.http.get(this.appsetting.baseURL + 'users')
  }
  /** POST: add a new hero to the database */
  add(data:any) {
    return this.http.post(this.appsetting.baseURL + 'users', data)
  }

MODEL

import { serialDTO } from "./serialDTO";

  export class SerialCodeDTO {
    id:number
    itemCode:string
    qtyReceived:number
    inputs:serialDTO[];
  }

export class serialDTO {
     serailNum:string
  }

Module

 MatTreeModule,
    MatSortModule,
    NgxMatSelectSearchModule,
    SelectDropDownModule,
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, { 
    dataEncapsulation:false, })
    
  ],
})

Answer 1

your createDb() should return an Object but you are returning an array.

return { users } should be :

return { users : users };