Angular-CLI/Angular2: Non-standard chars only load

问题:

In my Angular2 App: when I use "ng serve" or "ng build" extended characters are not rendered correctly in the Components. Extended chars directly in index.html work fine.

I suspect it is something to do with the way the files are being saved and served but I am new to ng2, webpack and CLI so not really sure how to test that theory just yet.

The charset in index.html is set to "charset=UTF-8" and if I view the individual component HTML page BEFORE bundling in the browser it renders correctly.

Repro Steps:

• Copy and paste "Próximamente" into the Index.html output area, as well as into a component's template.
• Run "ng-serve".
• The one in index.html will render correctly but the one in the template will not
• Note: The same happens with the deployed Prod ng build ouput

Versions

• Chrome: 53.0.2785.143 m
• Angular: 2.1.0
• Windows: 10
• Webpack: 2.1.0 Beta 25
• Angular-CLI: 1.0.0 Beta 18

回答1:

Make sure the content of .ts files (templates) is also encoded in UTF-8. In other words - the index.html's charset should match the real physical encoding of served files.

PS: You can easily check actual encoding in text editors MS VSC, Notepad++, file -i *, etc.