angular 6 HttpClient

Question

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?

I think you need to add a semicolon before the else in the ngIf, but I don't if that's the real problem — kaosdev
– kaosdev, Commented Mar 22, 2019 at 16:25
Your template looks fine, try to load localhost:43188/api/cat into a browser and see what you get back. OR use a tap operator to console log the reply of the http call. — Nikos Tsokos
– Nikos Tsokos, Commented Mar 22, 2019 at 16:51
Can you check if you have a CORS issue in your browser? Check your network tab and console logs. If the API service and the Angular App are not running on same port, your request to fetch data will be blocked by browser. — nircraft
– nircraft, Commented Mar 22, 2019 at 17:59

GreyBeardedGeek · Accepted Answer · 2019-03-22 16:49:00Z

3

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.

answered Mar 22, 2019 at 16:49

GreyBeardedGeek

30.2k2 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

M. Jellinek Over a year ago

Thanks for the reaction. Any suggestions on the best way to solve this CORS issue for a Microsoft WebApi backend (supporting not only Read actions, but also Create, Update and Delete actions)?

nircraft Over a year ago

one of the quick ways is to: Modify the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify your domain instead of *). This should solve your problem. If you can’t modify the server, you can run your own proxy. And this proxy can return the Access-Control-Allow-Origin header if it’s not at the Same Origin as your page. Instead of sending API requests to some remote server, you’ll make requests to your proxy, which will forward them to the remote server. Here are a few proxy options: github.com/Rob--W/cors-anywhere

M. Jellinek Over a year ago

I added services.AddCors(); to ConfigureServices and app.UseCors(builder => builder .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials()); to Configure and used the https (instead of http) endpoint for my WebApi (which is localhost:44356/api/cat) and now it works! Thanks for the help.

Collectives™ on Stack Overflow

angular 6 HttpClient

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related