When attempting to send values via a POST request in the URL of an Angular5 Laravel API route, I encountered an issue. Despite not receiving any errors in the browser console, no network activity was recorded upon sending the request. It is perplexing as I can verify that my route matches the one on my API by printing it in the console. The route functions perfectly when tested with Postman. Any assistance would be greatly appreciated...
Below is the code snippet from my favorite.html file:
<button (click)="addFavorite(stationId)">Add to favorite</button>
This is the excerpt from my favorite.component.ts file:
@Component({
selector: 'add-favorite',
templateUrl: './favorite.component.html',
styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
@Input() stationId: number;
constructor(
private favoritesService: FavoritesService,
private route: ActivatedRoute,
private router: Router
) {
this.route.params.subscribe( params => this.params = params);
}
observable: Observable<number>;
params: Params;
/*this.params['id']*/
ngOnInit() {
}
addFavorite() {
this.favoritesService.postFavorite(this.stationId);
}
}
This is the segment from my favorite service:
@Injectable()
export class FavoritesService {
private apiUrl = environment.apiUrl;
private user_id = 2;
constructor(private http: HttpClient) { }
postFavorite(stationId: number): Observable<number> {
const url = `${this.apiUrl}/user/${this.user_id}/favorites/${stationId}`;
console.log(url);
return this.http.post<number>(url, {station_id: stationId});
}
}
Check out my console output here
Lastly, here is the Laravel API route in question:
Route::post('user/{user_id}/favorites/{station_id}', 'FavoriteController@store');