'Angular universal SSR not displaying the angular assets folders images while serving it from Django

I have used Angular Universal for SSR(Server Side Rendering) of my angular application. The steps that I followed so far:

First I created my angular app and then add angular universal and run "npm run build:ssr" to build it and "npm run serve:ssr" to test it. Untill this point all good. I got 2 folders namely "browser" "server" and "server.js" file. Browser folder contents are equivalent to dist folder content what we usually get by ng build --prod. But I have done the same but using Angular Universal.

Now coming to the Django part:

STATIC_URL = '/static/'

MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')


STATICFILES_DIRS = [
    os.path.join(BASE_DIR, '<my_proj_dir>/static'),
]

I have also created a simple app to render the index.html page of angular:

class FrontEndRenderView(TemplateView):
    def get(self, request, **kwargs):
        return render(request, 'index.html', context=None)

Next I copy my browser i.e dist folder content inside the above app template(only the index.html) and static files(different js scripts)

Next I ran the python manage.py collectstatic to get all my static files into the root directory static folder which I already set in the settings.py and serve it from there.

Modified the index.html:

{% load static %}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>title</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> -->
    <link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
    <!-- Boxicons CSS -->
    <link rel="stylesheet" href="{% static 'assets/vendor/boxicons/css/boxicons.css' %}" />
    <link rel="stylesheet" href="{% static 'styles.c39d69f3977e73ce1858.css' %}">
</head>

<body>
    <app-root></app-root>

  

    <script src="{% static 'runtime-es2015.cdfb0ddb511f65fdc0a0.js' %}" type="module"></script>
    <script src="{% static 'runtime-es5.cdfb0ddb511f65fdc0a0.j' %}s" nomodule defer></script>
    <script src="{% static 'polyfills-es5.44547b4d4a23c72d0f9c.js' %}" nomodule defer></script>
    <script src="{% static 'polyfills-es2015.ffa9bb4e015925544f91.js' %}" type="module"></script>
    <script src="{% static 'scripts.c12912ef00956d2bca29.js' %}" defer></script>
    <script src="{% static 'main-es2015.4ee2329b81f30aaf3bc0.js' %}" type="module"></script>
    <script src="{% static 'main-es5.4ee2329b81f30aaf3bc0.js' %}" nomodule defer></script>
</body>

</html>

I am able to see my UI on browser but problem is with the images that are there in the assets folder in angular build. "http://localhost:8000/static/assets/img/details-3.png" this would give me the image but in angular there is no static word in the url "http://localhost:8000/assets/img/details-3.png" i.e. I have no idea what to do at this point. I also tried running this: npm run build:ssr --deploy-url /static/ But go the belo error-

ERROR in Entry module not found: Error: Can't resolve '/static/' in

How can I serve the asset folder images properly while serving my angular application through Django.

Sorry for this long question. Actually I wanted to be very clear about what is the flow here and what I want to achieve.

Solution 1:^[1]

Here is a workaround: add to your root urls.py

urlpatterns = [
#paths
] + static('/assets/', document_root=os.path.join(settings.BASE_DIR, 'static/assets'))

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dharman

'Angular universal SSR not displaying the angular assets folders images while serving it from Django

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]