Angular-cli: index.html missing character encoding

[slade-2k]

Please provide us with the following information:

OS?

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

Windows 7, 10, Debian Wheezy

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.21
node: 6.9.1
os: win32 x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

-

The log given by the failure.

Normally this include a stack trace and some more information.

Mention any other details that might be useful.

I am deploying my Angular2 FE on a Tomcat 7. As long as the Index.html is not utf8bom the character encoding gets lost. I told the Backend, the mysql system and the tomcat to use utf-8 but it gets lost anyway.

I can encode the index.html to utf8bom but when i run ng build -prod the generated index.html looses its encoding and I have to set it manually after. Is there a fix that the index.html can hold its character encoding? This Problem only occurs on Tomcat (at least not on node) as far as I can tell.

---

Thanks! We'll be in touch soon.

[JanCejka]

HTML meta tag with charset="UTF-8" into index.html?

[filipesilva]

I checked myself and builds always produce UTF-8 files. Not too sure what we can do but open to suggestions.

[JanCejka]

Close this issue? Newly generated and built project (v1.0.0-beta.24) contains correct meta tag in index.html. And if this is the case, then there are probably just 2 options not related to angular-cli:

• Components / templates were saved in non-utf8 encoding, while angular / angular-cli treated files as utf8 - this is not issue of angular / angular-cli, correction of charset in template / component is needed - this is probably not the case since node works correctly
• There might be some incorrect configuration of Tomcat serving pages in different than utf8 charset

On top - @slade-2k did not specify what encoding gets lost mean. If this means loss of encoding on data transferred asynchronously, this might be caused by missing Content-Type: application/json; charset=utf-8 on the server. If charset part is missing, default is ISO-8859-1 based on info https://www.w3.org/International/articles/http-charset/index#charset. Again, this is not an angular/angular-cli issue. More info is needed if error is elsewhere and in that case issue might be re-opened.

[slade-2k]

Thank you for your replies.

@JanCejka The HTML Meta tag is set as mentioned and the tomcat is configured in web.xml and server-xml to serve utf-8 aswell. The backend produces Content-Type: application/json; charset=utf-8 for everything.
I tried to save as utf-8 (even utf-8bom) with visual code and notepad++ but after the built with -prod flag the encoding is gone (meaning " " becomes "Â", german umlauts getting messed up and so on...). Data that comes from the backend is displayed fine. Only texts in the components get messed up.

Again - If I save the index.html as UTF-8BOM AFTER the prod built, it works flawless. Also this only occurs on my Tomcat, the node server works fine.

[Linknpay]

we have exactly the same issue.
@slade-2k did you find a solution ?

[cycchow]

i am facing the same issue, any solution?

[slade-2k]

Sorry, no solution yet... Still have to manually save as UTF-8BOM to get the right character encoding. A fix would be desirable because we cannot auto deploy like this.

[cycchow]

@slade-2k after i added a Charset filter in my application, the  gone

try this

            @Component
            public class CharacterSetFilter implements Filter {

                private final static Logger logger = LoggerFactory.getLogger(CharacterSetFilter.class); 

                private static final String UTF8 = "UTF-8";
                private static final String CONTENT_TYPE = "text/html; charset=UTF-8";
                private String encoding;

                @Override
                public void init(FilterConfig config) throws ServletException {
                    encoding = config.getInitParameter("requestCharEncoding");
                    if (encoding == null) {
                        encoding = UTF8;
                    }
                }

                @Override
                public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
                        throws IOException, ServletException {

            //        logger.debug("running chatset filter");

                    // Honour the client-specified character encoding
                    if (null == request.getCharacterEncoding()) {
                        request.setCharacterEncoding(encoding);
                    }
                    /**
                     * Set the default response content type and encoding
                     */
                    response.setContentType(CONTENT_TYPE);
                    response.setCharacterEncoding(UTF8);
                    chain.doFilter(request, response);
                }

                @Override
                public void destroy() {
                }

            }

[filipesilva]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}