Generated files are not UTF-8 encoded

[HugCoder]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Win10

2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.11-webpack.8
   node: 6.5.0
   os: win32 x64

3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   Generate a component or a new project. The files do not support UTF-8 chars, like åäö (Swedish). When rendered in HTML they appear as symbols. Changing the file encoding to UTF-8 (with or without BOM) fixes this.

4. The log given by the failure. Normally this include a stack trace and some
   more information.
   N/A

5. Mention any other details that might be useful.
   See step 3.

   ---

   Thanks! We'll be in touch soon.

[HugCoder]

I did some more tests now and it turns out that even if I manually change the encoding on the .ts and .html files, it seems like it reverts back to ANSI encoding again when webpack compiles it all, at least the .ts files.
Searching on this issue made me find this:
"webpack-encoding-plugin" (https://github.com/quackes/webpack-encoding-plugin)
and the issue seems like it might be related to this:
webpack/webpack-dev-server#432

The problem with angular-cli though is that it seems like there are no webpack.config files to add our own plugins or settings to. Maybe there's a way through angular-cli.json and adding it in "addons" or "packages"? So currently I cannot test if the plugin solves this issue. It would probably be good to add it natively to angular-cli though, since utf-8 encoding should be the base for everything in a modern web project.

[filipesilva]

I tried to repro and got UTF-8 encoded files througout.

Also on Win10, using VSCode myself. It is maybe your editor?

[HugCoder]

Thanks for answering!

Hmm, Yes, Visual Studio 2015 seems to re-save everything in ANSI. I found a "solution" by installing the "ForceUTF8" VS Extension:
https://visualstudiogallery.msdn.microsoft.com/222add7a-54a6-4fdd-b6f1-5d95cc596b42
but it doesn't exactly feel like a good/solid solution since if this would suddenly stop working/get disabled, things get worse. This is because I also noticed while manually changing the encoding, and VS re-saving to ANSI, I got weird symbols in the editor as well, which could be a pain to keep restoring to the original chars. I guess it's VS to blame though, no idea why they cannot simply default to UTF-8 for everyone instead of ANSI.
I guess I could develop the Angular part of the project in VS Code, while using VS2015 for the server code only. VS Code seems more compatible with the Angular CLI style of taking in new generated files automatically anyway. VS2015 requires you to add them to the project manually all the time.

[filipesilva]

Sorry I can't help you more than this, I don't think there's much we can do on the CLI side :/

[keivankashani]

I have the same problem in CLI when I transfer Dist files to server and use IIS all persian fonts have bad encoding , and They are not UTF8
What Can I Do ???

[nomykk]

Having the same encoding problem with ng build --prod, fonts encoding is wrong, any solution for this?

[nomykk]

For Spring and Spring Boot Apps, I found the solution here:
#7053

including these properties resolved the encoding issue for me.

spring.messages.encoding=UTF-8
server.tomcat.uri-encoding=UTF-8
spring.http.encoding.charset=UTF-8
spring.http.encoding.enabled=true
spring.http.encoding.force=true

[keivankashani]

Your answer is for Tomcat Web Server. Do you know a solution for IIS ?