title: zone.js:2969 GET http://localhost:4200/null 404 (Not Found)
body: <p>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 :</p>
  
  <blockquote>
    <p>zone.js:2969 GET <a href="http://localhost:4200/null" rel="nofollow noreferrer">http://localhost:4200/null</a> 404 (Not Found)</p>
  </blockquote>
  
  <p>Here is my app.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>app.component.ts : </p>
  
  <pre><code>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');
      }
  
  }
  </code></pre>
  
  <p>index.html : </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Eshop&lt;/title&gt;
    &lt;base href="/src"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"&gt;  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.component.html : </p>
  
  <pre><code>&lt;div&gt;   
      &lt;app-observable&gt;&lt;/app-observable&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>userdata.service.ts : </p>
  
  <pre><code>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&lt;Data[]&gt;{
        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);
      }
  }
  </code></pre>
  
  <p>observable.component.html : </p>
  
  <pre><code>&lt;br&gt;&lt;h3&gt;User Details with Observable&lt;/h3&gt;
  &lt;ul&gt;
    &lt;li *ngFor="let data of mydata | async" &gt;
      Id: {{data.id}}, Name: {{data.name}}
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div *ngIf="errorMessage"&gt; {{errorMessage}} &lt;/div&gt; &lt;br&gt;
  </code></pre>
  
  <p>userdata.ts :</p>
  
  <pre><code>export class Data {
     id: number;
     name: string;
     constructor() { }
  } 
  </code></pre>
  
  <p>observable.component.ts : </p>
  
  <pre><code>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&lt;Data[]&gt;;
      mydata : Data[];
      errorMessage : String;
  
      constructor(private userdataService: UserDataService) { }
  
      ngOnInit(): void 
      {
          this.ObservableData = this.userdataService.getDataWithObservable();     
          this.ObservableData.subscribe
          (     
              mydata =&gt; this.mydata = mydata,
              error =&gt;  this.errorMessage = &lt;any&gt;error
          );              
      }   
  }
  </code></pre>
  
  <p>userdata.json :</p>
  
  <pre><code>[
    {"id": 1, "name": "Jack"},
    {"id": 2, "name": "Maddy"},
    {"id": 3, "name": "Hiten"},
    {"id": 3, "name": "Jitendra"}
  ]  
  </code></pre>
  
  <p>These are all my files of my project...</p>
  
  <p>Can anybody suggest what should be done ?</p>