Angular Build UTF-8

[short orbit]

After upgrading to angular 20 recently, our user recently reported that they couldn't access the app anymore. After investigation this is due to angular build the script.js without preserviing unicode characters. Then when locale is different this will change to different language.

Previous build (using this builder @angular-builders/custom-webpack:browser"):

r.find_uri_expression = /\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?\xab\xbb\u201c\u201d\u2018\u2019]))/gi

Current build (using this builder @angular/build:application):

URI.find_uri_expression = /\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/ig;

When locale is japanese:

URI.find_uri_expression = /\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?ﾂｫﾂｻ窶懌€昶€倪€兢))/ig;

[fair oxide]

My guess this is ESBuild replacing it because the code is smaller. What is the actual issue?

[short orbit]

The actual issue is if you look at previous build using custom-webpack:browser they reformat the code to use this unicode characters. Now they are not using @angular/build:application.

Then when your chrome language locale change to Japanese they will reformat to japanese characters. Makes the code invalid.

I hope my explanation is clear.

I was upgrading angular from 14 to 20. for more context

[fair oxide]

Then when your chrome language locale change to Japanese they will reformat to japanese characters.
How would a changed browser locale change what is written in your .js files? Please elaborate.

[short orbit]

Like this

[fair oxide]

I know, but that does not change the contents of your code files!

[short orbit]

Well, apparently it is.

If I change to English locale

[fair oxide]

Looks like you have a misconfigured server which is not sending proper content type headers with character encoding

This forces the browser to guess.

[fair oxide]

Check the network tab

[short orbit]

Which part of request should I look at? scripts.js or index?

[fair oxide]

Both, and look at the headers sent by the server

[short orbit]

Script.js

Script.js japanese locale

Index japanese locale

[fair oxide]

Look at the content type on the index

[short orbit]

Index english locale

[fair oxide]

It is sending some random charset

Which is not the correct charset.

Your server needs to send the correct charset

[short orbit]

I see

Ok let me try

[fair oxide]

It should just always be utf-8

[short orbit]

Thanks for pointing that out, I was thinking that there might be an option for angular build to use charset utf-8

I know the issue might be around this

[fair oxide]

Well, it is outputting utf-8

But your server is then labelling it as something else