Assets with special characters (umlauts, ä, ö, ü) not served

Ionic Framework Ionic Angular
1

When running ionic lab with ionic serve --lab, assets that have special characters like ä, ö, ü in the file name or folder name are not served.

http://localhost:8100/assets/a.jpg — works
http://localhost:8100/assets/ä.jpg — does not work
http://localhost:8100/assets/a/a.jpg — works
http://localhost:8100/assets/ä/a.jpg — does not work
http://localhost:8100/assets/a/ä.jpg — does not work

When it does not work, it just redirects to http://localhost:8100 rather than serving the asset.

This did work in ionic-v3, but is an issue with ionic-v5.

Does anyone know why this issue exists or how to resolve it? Thänks!

2

Could this be a charset issue, in that your accented characters may be in a different encoding on the filesystem than UTF-8?

3

@rapropos Thanks for your suggestion! I’m unsure how to determine the encoding of the file names. Is there something like file -I ä.jpg for filename encodings?

I’m using the APFS file system on macOS 10.15.3 (19D76).

To be sure, I’ve double checked: If I serve the same file ä.jpg with an ionic-v3 application on the very same operating system with the same file system, the asset is served correctly.

4

Best thing I can think of is this:

$ LC_ALL=C ls *.jpg

That should show non-ASCII characters in the filenames in octal escape sequences.

5 
[2020-03-31 22:14:44] fiedl@fiedl-mbp ~/.../src master ⚡
▶ ls assets/*.jpg
assets/ä.jpg
▶ LC_ALL=C ls assets/*.jpg
assets/??.jpg

Here, it shows the non-ascii character ä as ??. However, this does not reveal the encoding for me. Do we get any insight from this?

6

Hmm. No, that’s not particularly helpful. Wonder why mine gives octal escapes - maybe it’s because I’m using GNU fileutils. How about:

$ cd assets; ls *.jpg | od -tx1

7 
[2020-03-31 22:25:44] fiedl@fiedl-mbp ~/.../src/assets master ⚡
▶ ls *.jpg | od -tx1
0000000    c3  a4  2e  6a  70  67  0a
0000007

The hex representation of ä in utf-8 is C3 A4 (wiki), which does match the above output, I think.

1 Like
8

Agreed. FWIW, I just tried this in a scratch project (albeit without --lab, which apparently requires software I don’t particularly want to install) and everything worked as expected even with Japanese filenames in assets. So two more questions:

  • does omitting --lab change anything for you?
  • what actually is your locale? just typing locale at the command line should tell you
9

Thanks a lot for taking the time!

Omitting --lab does not fix the issue. The assets with special characters are still not served.

[2020-03-31 22:39:28] fiedl@fiedl-mbp ~/... master ⚡
▶ locale
LANG="de_DE.UTF-8"
LC_COLLATE="de_DE.UTF-8"
LC_CTYPE="de_DE.UTF-8"
LC_MESSAGES="de_DE.UTF-8"
LC_MONETARY="de_DE.UTF-8"
LC_NUMERIC="de_DE.UTF-8"
LC_TIME="de_DE.UTF-8"
LC_ALL=

Btw, this is also a fresh project, I’ve created yesterday using ionic start foo tabs --type=angular.

[2020-03-31 22:39:29] fiedl@fiedl-mbp ~/... master ⚡
▶ ionic --version
6.3.0
10

OK, you have a UTF-8 locale, I have a UTF-8 locale. How about Chrome’s Developer Tools network tab?

What I did was to put two copies of the same file under assets with two different names. In the home page template:

<ion-content>
  <img src="../../assets/nihongo.png">
  <img src="../../assets/日本語.png">
</ion-content>

$ ionic serve -p8102
…look in Network tab, find following:

http://localhost:8102/assets/%E6%97%A5%E6%9C%AC%E8%AA%9E.png

So do you see your app even trying to load something like /assets/%C3%A4.png and failing, or is it not even issuing a request for the right resource?

11

I did the same thing: Copy the same file with different file names.

[2020-03-31 22:54:21] fiedl@fiedl-mbp ~/.../src/assets master ⚡
▶ cp a.jpg 日本語.jpg

[2020-03-31 22:45:55] fiedl@fiedl-mbp ~/... master ⚡
▶ ionic serve -p 8102

[2020-03-31 22:55:47] fiedl@fiedl-mbp ~/... master ⚡
▶ curl http://localhost:8102/assets/a.jpg | head   # works
▶ curl http://localhost:8102/assets/日本語.jpg | head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /assets/%C3%A6%C2%97%C2%A5%C3%A6%C2%9C%C2%AC%C3%A8%C2%AA%C2%9E.jpg</pre>
</body>
</html>

Same thing in the “network” tab. It tries to get the asset, but fails.

12

I’m trying to find out what ionic serve actually does.

▶ ionic serve -p 8102
> ng run app:serve --host=localhost --port=8102

In angular.json, “app:serve” appears to be referring to @angular-devkit/build-angular:dev-server.

▶ cat package-lock.json |grep angular-devkit/build-angular
    "@angular-devkit/build-angular": {
      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.803.25.tgz",

Do you have the same version of @angular-devkit/build-angular?

13

That’s odd (see the difference with “%E6%97%A5%E6%9C%AC%E8%AA%9E.png” that is the proper UTF-8 encoding of 日本語), but I suspect it’s an artifact of the way curl (doesn’t) encode stuff for us.

You may be onto something here:

"resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.900.7.tgz",
14

I can’t believe it: Updating @angular/cli to v9 helps!

[2020-04-01 00:05:09] fiedl@fiedl-mbp ~/... master ⚡
▶ ng update @angular/cli @angular/core --allow-dirty

Now, the assets with special characters (like http://localhost:8100/assets/日本語.jpg) are served correctly.

Thanks very much for your help, @rapropos!

2 Likes