URI malformed issue from @angular-devkit's dependency library Vite

Question

I just created a new angular application (version - 17.3.9) using the ng new url-test-app command.

I start the application using npm start, and navigating to http://localhost:4200 works fine.

But if I add a new query param with value %_24Q3, for example, http://localhost:4200/?testParam=test%_24Q3, then I am getting the below error message:

URI malformed  
    at decodeURI (<anonymous>)  
    at viteTransformMiddleware (file:///D:/angular/url-test- app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:63436:19)  
    at call (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42750:7)  
    at next (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42694:5)  
    at viteHMRPingMiddleware (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:64700:13)  
    at call (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42750:7)  
    at next (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42694:5)  
    at next (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42672:14)  
    at viteCachedTransformMiddleware (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:63421:9)  
    at call (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42750:7

I am not able to handle this with the Angular error handler.

C3roe · Accepted Answer · 2024-09-18 10:31:37Z

0

 http://localhost:4200/?testParam=test%_24Q3

That URL is malformed, because % indicates the start of a hex-encoded value, but you got no valid hex digits following that.

You need to properly URL-encode the %, as %25 - so your URL needs to be http://localhost:4200/?testParam=test%25_24Q3. Then calling decodeURI on it will work fine.

answered Sep 18, 2024 at 10:31

C3roe

97.6k15 gold badges100 silver badges172 bronze badges

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

3 Comments

user1606761 Over a year ago

thanks for the reply. Is that possible to handle error from angular application without breaking application behaviour?

C3roe Over a year ago

I couldn't say, but it would probably require changes to the angular code itself, I suppose. But why would using correctly encoded URLs break your application to begin with?

user1606761 Over a year ago

Thanks for your information, I suggested to client same you suggested

Collectives™ on Stack Overflow

URI malformed issue from @angular-devkit's dependency library Vite

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related