"Angular 4 is requesting a required get parameter that is currently missing

After running my code, I encountered the following console log error: "'Missing required 'page' parameter".

I attempted to set this as a parameter in my get request, and it seemed successful because I was able to view the params as an array in the console log.

However, despite this, I am still receiving the error message. What could I be missing?

Attached is a photo of the console for reference:

Thank you in advance!

Service:

export class StoriesService implements OnInit {

  private apiUrl = 'https://dev-api.byrd.news/v1/stories';

  constructor(private http: Http) {
    console.log("Yo! Stories!")
  }

  ngOnInit() { }

  getToken() {
    return Observable.fromPromise(firebase.auth().currentUser.getIdToken(true)
      .then((idToken) => {
        return idToken;
      }))
  }


  getData(page: string, feed: string, hits: string): Observable<any> {
    return this.getToken()
      .flatMap(idToken => {
        let headers = new Headers();
        headers.append('user_token', idToken);
        let params = new HttpParams()
          .set('page', page)
          .set('feed', feed)
          .set('hits', hits);
        let options = new RequestOptions({ headers: headers, params: params });
        // console.log(this.idToken, options);
        console.log("Token: " + idToken);
        console.log(headers, params);
        return this.http
          .get(this.apiUrl, { params, headers })
          .map((response: Response) => {
            console.log("Breakthrough!")
            return response.json() || {};
          })
      })
      .catch(this.handleError);
  }

  private handleError(error: Response) {
    return Observable.throw(error.statusText);
  }

Component:

  getStories() {
    this.storiesService.getData('0', 'latest', '6')
    .subscribe(data => {
      console.log(data);
      console.log("No more data available.")
    })
  }

Edit: I have noticed that the URL I receive has unusual looking params. Could this be due to them being unparsed?

""

Answer №1

It appears that the server is only sending that specific response to you. This issue seems to lie more with the request being made rather than Angular itself.

UPDATE: Upon closer inspection, it seems that the request structure is a bit unusual. According to the RequestOptions documentation, the params should be a URLSearchParams instead of an HttpParams. This discrepancy could be causing the problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for indicating errors in fields that have not been "interacted with" when submitting

My Angular login uses a reactive form: public form = this.fb.group({ email: ['', [Validators.required, Validators.email]], name: ['', [Validators.required]], }); Upon clicking submit, the following actions are performed: ...

Steps to deactivate an angular material component on version 2.0.0-beta.5

Recent updates have led to an error in my code: Error at /Users/asaylor/Desktop/RevenueIQ/website/aot/node_modules/@angular/material/typings/index.ngfactory.ts:4236:30: Property 'disabled' does not exist on type 'MdCheckbox' I am enc ...

Using the moment library in Angular to convert date and time can sometimes lead to errors

Whenever I attempt to convert a Gregorian date to a Persian date, the minute value in the conversion ends up becoming an error. For instance, let's say I want to convert this specific date and time to a Persian date: 2020-09-14T16:51:00+04:30 should ...

`What specific type should be assigned to the custom styled input component in MUI?`

Hey team! Would you mind helping me out with this issue? The Mui documentation suggests setting a type for a Mui Styled component like this: const MyComponent = styled(MuiComponent)(({ theme }) => ({ // styling })) as typeof MuiComponent This method ...

Adding a button label value to a FormGroup in Angular

I've been working on a contact form that includes inputs and a dropdown selection. To handle the dropdown, I decided to use the ng-Bootstrap library which involves a button, dropdown menu, and dropdown items. However, I'm facing difficulties inte ...

Issues with Await and Async functionality in Angular and Ionic 4 causing unexpected behavior

Struggling to show error messages during the sign-up process? Constantly encountering the same issue in your code? The error TS1308 is throwing you off: 'await' expression is only allowed within an async function. Take a look at this problemati ...

How to define an index signature in Typescript that includes both mandatory and optional keys

I am on a quest to discover a more refined approach for creating a type that permits certain keys of its index signature to be optional. Perhaps this is a scenario where generics would shine, but I have yet to unlock the solution. At present, my construc ...

React Component not displaying properly when used inside a map iteration

I am currently working on rendering multiple components using the .map method on an array with specific content. Although I can't find any errors in the console, the component is not appearing in the DOM as expected. I attempted to set subHeader to nu ...

Determining the optimal size for the thumb on a mat slider

Currently, I have incorporated a mat slider into my Angular application. For reference, you can view the Stackblitz link here: https://stackblitz.com/edit/angular-material-custom-slider?file=app%2Fslider-overview-example.ts The issue I am encountering is ...

How can we restrict a user from moving away from the current tab in Angular?

I am looking for a solution to restrict users from switching tabs or opening new ones during an exam on our application for security purposes. What recommendations do you have to accomplish this? ...

Angular 4 Form Validation: Ensuring Data Integrity

While trying to implement the example found at this link https://github.com/agiratech/angular4-reactive-form-exercise2/, I encountered an issue where no errors were displayed on the screen after submitting the form. Below is all the relevant code related t ...

Guide on deploying an Angular application with SSL support

I feel a bit lost on this matter, but I'm working on hosting my angular website on github pages with a custom domain name. My goal is to enable https for added security, but I can't quite figure out the process. Do I need to include more code to ...

Ways to turn off specific ngtsc warnings

Ever since updating my Angular app to version 15, I've been noticing some warnings popping up in both the terminal and Chrome DevTools. Is there a way to turn off or disable these warnings? I keep seeing this warning message about the optional chain o ...

Updating a child component within a Modal: A step-by-step guide

I am using a global Modal component: export const ModalProvider = ({ children }: { children: React.ReactNode }) => { const [isModalOpen, setIsModalOpen] = React.useState(false); const [config, setConfig] = React.useState<ModalConfig | nu ...

Issue with IE11 compatibility in Angular2 (AngularQuickStart version 2.4.0) due to syntax error

Encountering an error in the browser console when attempting to run my Angular2 app on IE11. The error "Недопустимый знак" translates to unacceptable symbol. https://i.stack.imgur.com/0mHBC.png Here is a snippet of my index.html: <!DO ...

Unexpected disappearance of form control in reactive form when using a filter pipe

Here is a reactive form with an array of checkboxes used as a filter. An error occurs on page render. Cannot find control with path: 'accountsArray -> 555' The filter works well, but the error appears when removing any character from the fi ...

Configuring .NET Core to send authentication cookies to a separate domain

I am facing an issue with using cookies on the frontend, which has a domain different from the backend. The backend is built with .Net Core and the frontend with Angular. I have learned that I need to set withCredentials: true when making http calls. Howev ...

The interaction between Web API, Angular, and the unique MAC Address

My organization currently operates an Application using ASP MVC. However, the application is experiencing slow performance and confusion due to multiple programmers with conflicting ideas. I have taken on the task of refactoring and migrating it to Angular ...

Issue with displaying labels in ChartJS plugin on Ionic 3 platform

Currently, I am using Ionic 3 and have implemented a bar chart in my project. However, I am facing an issue where the data labels are not being displayed next to the bars on the chart. This is similar to the problem discussed in this question how to displa ...

The issue I am facing is with the post_logout_redirect_uri not functioning properly when using localStorage in an OIDC Auth

authority: 'yyy', client_id: this.'yyy', redirect_uri: 'http://localhost:4200/login', response_type: 'token', scope: 'yyy', post_logout_redirect_uri: & ...