Extend the django angular RealWorld example with the internationalization support #1637

mattions · 2025-01-22T11:00:17Z

mattions
Jan 22, 2025

Hi all,

I was wondering if it would be possible to extend the realworld example of django _ angular (https://github.com/thanhdev/realworld-django-rest-framework-angular?tab=readme-ov-file) with the internationalization support.

I started to do some work on it, but I found myself stack when serving the index file.

I've managed to configure angular with the internationalization support, and manage to overwrite temporarily the index which gets server, however all the links are broken, even though the basehref is in the html.

For testing I've modified the backend/config/urls.py with the following:

    # Frontend
    #re_path(r"^(?:.*)$", TemplateView.as_view(template_name="index.html")),
    re_path(r"^(?:.*)$", TemplateView.as_view(template_name="it/index.html"))

I get two produced folder (I am testing with an additional it locale):

$ ls frontend/dist/frontend/browser/
en-US  it

And all the files are properly populated in the folder:

$ ls frontend/dist/frontend/browser/it/
favicon.ico  index.html  main-TZHE2ZAM.js  polyfills-PLLVDC6G.js  styles-QCLDF5H7.css

This is the produced html

<html>
<body>
<!--StartFragment-->
  | <!doctype html>
-- | --
  | <html lang="it" dir="ltr" data-critters-container>
  | <head><base href="/it/">
  | 
  | <title>Conduit</title>
  | <style>@import"//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css";@import"//demo.productionready.io/main.css";body{width:100%;overflow-x:hidden}</style><link rel="stylesheet" href="/static/styles-QCLDF5H7.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="/static/styles-QCLDF5H7.css"></noscript><link rel="preload" href="/static///code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" as="style"><link rel="preload" href="/static///demo.productionready.io/main.css" as="style"></head>
  | <body>
  | <app-root></app-root>
  | <script src="/static/polyfills-PLLVDC6G.js" type="module"></script><script src="/static/main-TZHE2ZAM.js" type="module"></script></body>
  | </html>
  |  

<!--EndFragment-->
</body>
</html><!doctype html>
<html lang="it" dir="ltr" data-critters-container>
<head><base href="[/it/](http://127.0.0.1:8000/it/)">
  <meta charset="utf-8">
  <title>Conduit</title>
<style>@import"//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css";@import"//demo.productionready.io/main.css";body{width:100%;overflow-x:hidden}</style><link rel="stylesheet" href="[/static/styles-QCLDF5H7.css](http://127.0.0.1:8000/static/styles-QCLDF5H7.css)" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="/static/styles-QCLDF5H7.css"></noscript><link rel="preload" href="[/static///code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css](http://127.0.0.1:8000/static///code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css)" as="style"><link rel="preload" href="[/static///demo.productionready.io/main.css](http://127.0.0.1:8000/static///demo.productionready.io/main.css)" as="style"></head>
<body>
  <app-root></app-root>
<script src="[/static/polyfills-PLLVDC6G.js](http://127.0.0.1:8000/static/polyfills-PLLVDC6G.js)" type="module"></script><script src="[/static/main-TZHE2ZAM.js](http://127.0.0.1:8000/static/main-TZHE2ZAM.js)" type="module"></script></body>
</html>

but these are the errors I get on the console:

127.0.0.1/:6 
        
        
       GET http://127.0.0.1:8000/static///demo.productionready.io/main.css net::ERR_ABORTED 404 (Not Found)Understand this errorAI
127.0.0.1/:6 
        
        
       GET http://127.0.0.1:8000/static///code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css net::ERR_ABORTED 404 (Not Found)Understand this errorAI
127.0.0.1/:9 
        
        
       GET http://127.0.0.1:8000/static/polyfills-PLLVDC6G.js net::ERR_ABORTED 404 (Not Found)Understand this errorAI
127.0.0.1/:6 
        
        
       GET http://127.0.0.1:8000/static/styles-QCLDF5H7.css net::ERR_ABORTED 404 (Not Found)Understand this errorAI
127.0.0.1/:9 
        
        
       GET http://127.0.0.1:8000/static/main-TZHE2ZAM.js net::ERR_ABORTED 404 (Not Found)Understand this errorAI
127.0.0.1/:1 The resource http://127.0.0.1:8000/static///demo.productionready.io/main.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.Understand this warningAI
127.0.0.1/:1 The resource http://127.0.0.1:8000/static///code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Do you know what I'm doing wrong?

Happy to contribute as PR to the repo, once I've got this working (Or I can still make a PR to the repo, if it helps moving this forward)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extend the django angular RealWorld example with the internationalization support #1637

{{title}}

Replies: 0 comments

Select a reply

Extend the django angular RealWorld example with the internationalization support #1637

mattions Jan 22, 2025

Replies: 0 comments

mattions
Jan 22, 2025