title: Load json from local file with http.get() in angular 2
body: <p>I'm trying to load a local json with <code>http.get()</code> in angular 2. I tried something, that I found here on stack. It looks like this:</p>
  
  <p>this is my <code>app.module.ts</code> where I <code>import</code> the <code>HttpModule</code> and the <code>JsonModule</code> from <code>@angular/http</code>:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule, JsonpModule } from '@angular/http';
  import { RouterModule, Routes } from '@angular/router';
  
  import { AppComponent } from './app.component';
  import { NavCompComponent } from './nav-comp/nav-comp.component';
  import { NavItemCompComponent } from './nav-comp/nav-item-comp/nav-item-comp.component';
  
  
  @NgModule({
      declarations: [
          AppComponent,
          NavCompComponent,
          NavItemCompComponent
      ],
      imports: [
          BrowserModule,
          FormsModule,
          HttpModule,
          JsonpModule,
          RouterModule.forRoot(appRoutes)
      ],
      providers: [],
      bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  </code></pre>
  
  <p>In my <strong>component</strong> I <code>import</code> <code>Http</code> and <code>Response</code> from <code>@angular/http</code>. Then I have a function called <code>loadNavItems()</code>, where I try to load my json with relative path using <code>http.get()</code> and print the result with <code>console.log()</code>. The function is called in <code>ngOnInit()</code>:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Http, Response } from '@angular/http';
  
  @Component({
      selector: 'app-nav-comp',
      templateUrl: './nav-comp.component.html',
      styleUrls: ['./nav-comp.component.scss']
  })
  export class NavCompComponent implements OnInit {
  
      navItems: any;
  
      constructor(private http: Http) { }
  
      ngOnInit() {
          this.loadNavItems();
      }
  
      loadNavItems() {
          this.navItems = this.http.get("../data/navItems.json");
          console.log(this.navItems);
      }
  }
  </code></pre>
  
  <p>My <strong>local json file</strong> looks like this:</p>
  
  <pre><code>[{
          "id": 1,
          "name": "Home",
          "routerLink": "/home-comp"
      },
      {
          "id": 2,
          "name": "&amp;Uuml;ber uns",
          "routerLink": "/about-us-comp"
      },
      {
          "id": 3,
          "name": "Events",
          "routerLink": "/events-comp"
      },
      {
          "id": 4,
          "name": "Galerie",
          "routerLink": "/galery-comp"
      },
      {
          "id": 5,
          "name": "Sponsoren",
          "routerLink": "/sponsoring-comp"
      },
      {
          "id": 6,
          "name": "Kontakt",
          "routerLink": "/contact-comp"
      }
  ]
  </code></pre>
  
  <p>There are no errors in the console, I just get this output:<a href="https://i.stack.imgur.com/GKHtv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GKHtv.png" alt="enter image description here"></a></p>
  
  <p>In my <strong>html template</strong> I would like to loop the items like this:</p>
  
  <pre><code>&lt;app-nav-item-comp *ngFor="let item of navItems" [item]="item"&gt;&lt;/app-nav-item-comp&gt;
  </code></pre>
  
  <p>I made this with a solution I found here on stack, but I have no idea why it doesn't work?</p>
  
  <p><strong>EDIT RELATIVE PATH:</strong>
  I also get a problem with my relative path, but I'm sure it's the right one when I use <code>../data/navItems.json</code>. In the screenshot you can se the nav-comp.component.ts, where I load the json using relative path from the json file which is in the folder called data? What's wrong, the console prints an 404 error, because it can't find my json file from the relative path?</p>
  
  <p><a href="https://i.stack.imgur.com/gW7GV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gW7GV.png" alt="enter image description here"></a></p>