angularangular-i18n

Assets dont load when angular app is localized

i am trying to create a website for myself where one can change the language. I followed the Angular's documentation on locales (link) step by step. I marked my HTML elements with the i18n tag, extracted a messages.xlf file, added the translation myself and configured angular.json as following:

"projects": {
  "Frontend": {
    "i18n": {
      "sourceLocale": "de",
      "locales": {
        "en": {
          "translation": "src/locale/messages.en.xlf",
          "baseHref": "en/"
        }
      }
    },
    ......
    "architect": {
      "build": {
        .....
        "options": {
          "localize": true,
         .............
        }
        .......
        "assets": [
          {
            "glob": "**/*",
            "input": "public"
          }
        ],

if you replace "localize" with an element like "en" or "de", run with ng serve, the website loads correctly with the translation. if i specify "localize": true, build the project with ng build --localize, then run serve ./dist/frontend/browser, i see this when i load the local host:

serving the dist folder

navigating into either "de/" or "en/", the website loads with the correct translation, but any image asset inside public/assets/images/ return a 404 error. i think this is because it actually now has the path <locale>/assets/images/ instead of /assets/images/. if i type for example http://localhost:3000/de/assets/images/myimage.jpg it correctly retrieves the image. how do i configure angular so it requests images from the locale-specific route? i would appreciate the help!

Solution

  • You must not prefix asset paths with /. The image will then be loaded from the server root and not from the application's base URL. For applications with i18n and multiple locales this is particularly important as the application does not run on root. Just skip the leading / and the assets will load correctly.

    <img src="assets/images/myimage.jpg">