CODEWITHSUNDEEP
angularangular6angular-httpclient
M. Jellinek
M. Jellinek

Reputation: 1

angular 6 HttpClient

I have created a backend REST API which I think works fine. I think it works fine, because when I navigate to http://localhost:43188/api/cat in my web browser I get an open/save dialog and when I choose save I get a cat.json file with the following content:

[{"name":"Aap"},{"name":"Noot"},{"name":"Mies"}]

Then I created an Angular6 (frontend) app (ng new angular-project) and added a a cat component (ng g c cat) and changed the file cat.component.ts to:

import { Component, OnInit } from '@angular/core';
import { Observable, of } from "rxjs";
import { HttpClient } from "@angular/common/http";
import * as _ from 'lodash';

interface Cat { 
  name: string;
}

@Component({
  selector: 'app-cat',
  template: ` 
    <ul *ngIf="cats$ | async as cats else noData"> 
      <li *ngFor="let cat of cats"> 
        {{cat.name}} 
      </li>  
    </ul> 
    <ng-template #noData>No Data Available</ng-template>
  `})

export class CatComponent implements OnInit {

  cats$: Observable<Cat[]>;

  constructor(private http: HttpClient) {
  }

  ngOnInit() {
    this.cats$ = this.http.get<Cat[]>('http://localhost:43188/api/cat');
  }

}

and changed my app.module.ts to 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { CatComponent } from './cat/cat.component';

@NgModule({
  declarations: [
    AppComponent,
    CatComponent
  ],
  imports: [
    BrowserModule, 
    FormsModule,
    HttpClientModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

But when I now add 

<app-cat></app-cat>

to my app.component.html I get "No Data Available" when I run my Angular application.

Any idea what I am doing wrong?

Upvotes: 0

Views: 92

Answers (1)

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

Check the network tab of your browser's development tools when the request is being made.

Unless your Angular app is also running on port 43188 you are almost certainly experiencing a CORS issue, the solution to which has been posted here on SO numerous times.

Upvotes: 3

Related Questions