Getting GET http://localhost:4200/null 404 (Not Found) in angular

Question

I am working on an angular app using ng9.

I have a div in which I want to set an avatar using using an image from the api. In the component.ts

....

export class HomeComponent implements OnInit {

  nextLaunch$: Observable<SpacexNext>;

  panelOpenState: true;

  search = '';

  constructor(
    private spacexService: SpacexService,
    private sanitizer: DomSanitizer
    ) { }

  ngOnInit(): void {
    this.nextLaunch$ = this.spacexService.getNextLaunch();
    }
    
...

in the .html

<div mat-card-avatar *ngIf="(nextLaunch$ | async)?.links?.patch?.small !== null" [style.backgroundImage]="'url('+(nextLaunch$ | async)?.links?.patch?.small+')'" class="example-header-image">
</div>

This works perfectly and the avatar is set as expected, however I have I get an error in the browser console:

GET http://localhost:4200/null 404 (Not Found)

Any ideas to get rid of the error?

More Info..

The api works well and my service returns data as expected. The avater image is displayed without any problem. My only issue is the error that appears on the browser console. I had done some research and saw that using async pipe could be the cause of the issue but I prefer this rather than subscribe method.

TIA.

@Pac0 Yes I am certain. When I comment out this div the error is not there anymore. Also when I replace div with img tag it does not show this error, however this is not a prefered method. — Kelvin Cayman
– Kelvin Cayman, Commented Aug 11, 2020 at 21:23
This is why you don't put so much logic in the template - it makes debugging very difficult. Instead of all this ='url('+(nextLaunch$ | async)?.links?.patch?.small+')'" assign it a variable in your controller. Then, don't use the DomSanitizer and [style.backgroundImage] but instead set a CSS class, which is more idiomatic. That said, you need to show us an http.get() (probably in spacexService.getNextLaunch()) which is triggering your error. Maybe? — msanford
– msanford, Commented Aug 11, 2020 at 21:38
ok, thanks for feedback, I agree with your research result by the way, the async pipe is probably not to be used like that. I would create a public smallPatchUrl: string (or other correct type), use this.spacexService.getNextLaunch().subscribe(x => this.smallPatchUrl = x.links.patch.small) (maybe add null checks like if(x && x.links && x.links.patch) and use *ngIf="this.smallPatchUrl" and similar use for other 'url' attribute. — Pac0
– Pac0, Commented Aug 11, 2020 at 21:41
Ok, I'll try to be more precise: *ngIf="this.smallPatchUrl" [style.backgroundImage]="url(this.smallPatchUrl)" — Pac0
– Pac0, Commented Aug 12, 2020 at 6:24
Thank you @Pac0 this worked but I changed it to [style.backgroundImage]="'url('+this.smallPatchUrl+')'". Thank you so much! No more skip trace errors — Kelvin Cayman
– Kelvin Cayman, Commented Aug 12, 2020 at 16:12

Pac0 · Accepted Answer · 2020-08-13 05:10:28Z

2

The async pipe is not well suited to be used in this way.

I'd suggest to use an intermediate variable in your component code, to hold the result of your asynchronous operation

public smallPatchUrl: string;

(I assume this url is of type string, adapt if necessary).

In your ngOnInit use:

this.spacexService.getNextLaunch().subscribe(x => {
  if (x && x.links && x.links.patch) {
    this.smallPatchUrl = x.links.patch.small;
  }
});

in your template code, you can use for your component:

*ngIf="this.smallPatchUrl" [style.backgroundImage]="'url(' + this.smallPatchUrl + ')'"

This way, your component will never use this.smallPatchUrl when it is null or undefined.

edited Aug 13, 2020 at 5:10

answered Aug 12, 2020 at 22:21

Pac0

23.3k9 gold badges76 silver badges85 bronze badges

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

Collectives™ on Stack Overflow

Getting GET http://localhost:4200/null 404 (Not Found) in angular

More Info..

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

More Info..

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related