I m currently working on a very basic angular project using service.ts to get the http data from the .json file, but on running that, there is no CLI Error but the browser's console shows this :

zone.js:2969 GET http://localhost:4200/null 404 (Not Found)

Here is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ObservableComponent } from './observable/observable.component';
import { UserDataService } from './userdata.service';

@NgModule({
  declarations: [
    AppComponent,
    ObservableComponent
  ],
  imports: [
    BrowserModule,
    CarouselModule.forRoot(),
    HttpModule
  ],
  providers: [UserDataService],
  schemas: [ NO_ERRORS_SCHEMA ],
  bootstrap: [AppComponent],

})

export class AppModule { }

app.component.ts :

import { Component } from '@angular/core';
import { setTheme } from 'ngx-bootstrap/utils';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor() {
        setTheme('bs4');
    }

}

index.html :

app.component.html :

userdata.service.ts :

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import {Observable} from 'rxjs';
import { map } from "rxjs/operators";
import { catchError } from 'rxjs/operators';
import { Data } from './userdata';
import { throwError } from 'rxjs';

@Injectable()
export class UserDataService {

  url : "http://localhost:4200/assets/data/userdata.json";
  constructor(private http:Http) { }  

  getDataWithObservable() : Observable{
      return this.http.get(this.url)
            .pipe(
              map(this.extractData),
              catchError(this.handleErrorObservable)
            );
  }

    private extractData(res: Response) 
    {
        let body = res.json();              
        return body;
    }

    private handleErrorObservable (error: Response | any) 
    {   
        return throwError(error.message || error);
    }
}

observable.component.html :

User Details with Observable

  

    Id: {{data.id}}, Name: {{data.name}}
  


 {{errorMessage}} 
 

userdata.ts :

export class Data {
   id: number;
   name: string;
   constructor() { }
} 

observable.component.ts :

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { UserDataService } from '../userdata.service';
import { Data } from '../userdata';

@Component({
  selector: 'app-observable',
  templateUrl: './observable.component.html',
  styleUrls: ['./observable.component.css']
})
export class ObservableComponent implements OnInit 
{   
    ObservableData :  Observable;
    mydata : Data[];
    errorMessage : String;

    constructor(private userdataService: UserDataService) { }

    ngOnInit(): void 
    {
        this.ObservableData = this.userdataService.getDataWithObservable();     
        this.ObservableData.subscribe
        (     
            mydata => this.mydata = mydata,
            error =>  this.errorMessage = error
        );              
    }   
}

userdata.json :

[
  {"id": 1, "name": "Jack"},
  {"id": 2, "name": "Maddy"},
  {"id": 3, "name": "Hiten"},
  {"id": 3, "name": "Jitendra"}
]  

These are all my files of my project...

Can anybody suggest what should be done ?