Angular universal SSR从Django提供服务时不显示Angular assets文件夹图像_Django_Angular_Server Side Rendering_Angular Universal

Angular universal SSR从Django提供服务时不显示Angular assets文件夹图像

django angular

Angular universal SSR从Django提供服务时不显示Angular assets文件夹图像,django,angular,server-side-rendering,angular-universal,Django,Angular,Server Side Rendering,Angular Universal,我已经将Angular Universal用于Angular应用程序的SSR（服务器端渲染）。到目前为止，我遵循的步骤是：首先，我创建了我的angular应用程序，然后添加angular universal并运行“npm运行构建：ssr”进行构建，然后添加“npm运行服务：ssr”进行测试。直到这一点都很好。我有两个文件夹，分别是“browser”“server”和“server.js”文件。浏览器文件夹内容相当于我们通常通过ng build--prod获得的dist文件夹内容。但我也做了同样

我已经将Angular Universal用于Angular应用程序的SSR（服务器端渲染）。到目前为止，我遵循的步骤是：

首先，我创建了我的angular应用程序，然后添加angular universal并运行

“npm运行构建：ssr”

进行构建，然后添加

“npm运行服务：ssr”

进行测试。直到这一点都很好。我有两个文件夹，分别是

“browser”

“server”和

“server.js”

文件。浏览器文件夹内容相当于我们通常通过

ng build--prod

获得的dist文件夹内容。但我也做了同样的事情，只是使用了角度万有

现在来看Django部分：

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'),
]

接下来，我复制我的浏览器，即上述应用程序模板中的dist文件夹内容（仅index.html）和静态文件（不同的js脚本）

接下来，我运行了

python manage.py collectstatic

，将我的所有静态文件放入根目录静态文件夹中，我已经在settings.py中设置了该文件夹，并从那里开始提供它

修改了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>

如何在通过Django为angular应用程序提供服务的同时正确地提供资产文件夹图像

很抱歉问了这么长的问题。实际上，我想非常清楚这里的流程是什么，我想实现什么

{% 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>

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