When reloading the page with query parameters, the Angular URL is dynamically altered

Hello to all, ensuring everyone's safety 😀

Currently, I am utilizing Angular 9 and I have a URL that incorporates query parameters, and they are operating seamlessly as anticipated.

Here is My URL:

http://localhost:4200/#/playbook/columnView?taskType=KEYPOINT&taskTypeId=d1b404d7-afa2-42cd-9f1b-5cc8125c0bfb&taskBlockId=ad96069c-cbb2-4a65-8b75-175bf1977282

Nevertheless, when I reload my page using the browser's reload button, the URL is appending some %3, how can I rectify this?

Upon Reloading, the URL Becomes:

http://localhost:4200/#/playbook/columnView%3FtaskType%3DKEYPOINT&taskTypeId%3Dd1b404d7-afa2-42cd-9f1b-5cc8125c0bfb&taskBlockId%3Dad96069c-cbb2-4a65-8b75-175bf1977282

My Routing Configuration:

const routes: Routes = [
    {
        path: '',
        component: PlaybookEntryComponent,
        children: [
            {
                path: 'columnView',
                component: ColumnviewComponent
            }
        ],
    },
];

Answer â„–1

When you refresh the page, your browser automatically encodes the URL.

For example, ? becomes %3F

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

Enhancing Responses in NestJS with External API Data

I'm a beginner in NestJs, Graphql, and typescript. I am trying to make an external API call that is essentially a Graphql query itself. The goal is to modify the response, if necessary, and then return it for the original request or query, in this ca ...

Troubleshooting Generic Problems in Fastify with TypeScript

I am currently in the process of creating a REST API using Fastify, and I have encountered a TypeScript error that is causing some trouble: An incompatible type error has occurred while trying to add a handler for the 'generateQrCode' route. The ...

Issue with Ionic 4 IOS deeplinks: Instead of opening in the app, they redirect to the browser

After working diligently to establish deeplinks for my Ionic 4 iOS application, I meticulously followed a series of steps to achieve this goal: I uploaded an Apple site association file to the web version of the app, ensuring the utilization of the prec ...

Encountering TypeScript error in the beforeRouteUpdate hook with Vue and vue-property-decorator

I am developing an application using Vue 2 with TypeScript and vue-property-decorator. Within my component, I am utilizing the beforeRouteEnter/beforeRouteUpdate hooks. One of the methods in my component is findProjects, which I want to call within the bef ...

Leveraging the `--max-http-header-size` flag with ts-node

Encountered an issue when trying to use ts-node with the --max-http-header-size 15000 flag. It works fine with regular node, but unfortunately, ts-node does not support that option ...

Creating reusable TypeScript function argument types

There is a function that I have defined in the following way: function getRangeBounds(start: number, stop?: number, step?: number) { if (step === undefined) step = 1; const actualStart = start !== undefined && stop !== undefined ? start : 0; ...

What is the best way to implement a dispatch function in TypeScript?

Despite my expectations, this code does not pass typechecking. Is there a way to ensure it is well typed in Typescript? const hh = { a: (_: { type: 'a' }) => '', b: (_: { type: 'b' }) => '', } as const; ex ...

Template specific requirements in Angular

When I have a child component app-page-header, here's what I want to achieve: If the value of headerOptions.headerTitle is not 'Idle Disposition', then set [titleData] to equal 'headerOptions.headerTitle'. However, if headerOptions ...

Rendering a Nativescript component once the page has been fully loaded

I'm currently working on integrating the WikitudeArchitectView into my TypeScript code. I've successfully registered the element in the main.ts TypeScript file: var architectView = require("nativescript-wikitudearchitectview"); registerElement ...

How can an array be generated functionally using properties from an array of objects?

Here's the current implementation that is functioning as expected: let newList: any[] = []; for (let stuff of this.Stuff) { newList = newList.concat(stuff.food); } The "Stuff" array consists of objects where each ...

Different varieties of typescript variables

My variable is declared with two possible types. Consider this example: let foo: number | number[] = null; Then, I have an if condition that assigns either a single number or an array to that variable: if(condition) { foo = 3; } else { foo = [1,2,3 ...

I'm puzzled as to why my createDoorMethod is returning a string value instead of a number, even though I am passing it a number. Can someone help me

Currently enrolled in a web development course, I am diving into the world of Angular 2 and TypeScript. Despite following along with the video tutorial and using the same code, my implementation is not working as expected, leaving me puzzled. Here is the ...

Having trouble with obtaining real-time text translation using ngx translate/core in Angular 2 with Typescript

Issue : I am facing a challenge with fetching dynamic text from a JSON file and translating it using the translate.get() method in Angular2. this.translate.get('keyInJson').subscribe(res => { this.valueFromJson = res; /* cre ...

Encountering the error message "Expected token '<' instead of '{' when assigning Interfaces to a React Class Component"

Encountered a problem in my Laravel 8/Babel/Mix/React/TypeScript setup where a regular React class component is throwing a compilation error after migrating the project to TypeScript and passing an empty props and simple state interface to the component. ...

Changing the left border color dynamically based on the value of an object within a loop

My objective is to achieve a design where the left border of the cards appears as shown in the image below: https://i.sstatic.net/nsVeJ.png The loop structure is as follows: <ion-card *ngFor="let office of searchItems" class="custom" ...

There seems to be an issue with the validation feature in FormBuilder

I am currently working on a form that utilizes the FormBuilder. The challenge I am facing is displaying my custom validation message below the input field. While my code successfully shows a red "wrong" text when the input field is empty, it does not disp ...

Ways to classify the prop type of a functional component by specifying the different types of props for the FC

I have created two functional components that require different prop types. export interface OrderImageProps { orders: ICartItem[] } const OrderImage: React.FC<OrderImageProps> = (props: OrderImageProps) => { return ( <div> ...

Incorporate a fresh attribute to the JSON data in an Angular API response

I'm currently working on updating my JSON response by adding a new object property. Below is an example of my initial JSON response: { "products": [{ "id": 1, "name": "xyz" }] } My goal is to include a new object property ca ...

The HttpPut request code format is malfunctioning, although it is effective for another request

I'm struggling with a HTTPPUT request that just won't get called. Strangely enough, I have a similar put request that works perfectly fine for another tab even though both pages are practically identical. I've exhausted all options and can&a ...

Example showcasing the functionality of the react-custom-scrollbars package in a TypeScript React application

In my TypeScript React project, I am struggling to set up the react-custom-scrollbars package successfully. Despite consulting the examples provided in the GitHub repository, I have not been able to get it working. Can someone share a functional example ...