Angular+Django项目中ng build不更新文件但ng serve正常的问题

我正在运行一个Angular前端搭配Django后端的项目。最近修改了模板和组件代码后，执行ng build无法同步更新内容，但运行ng serve并访问127.0.0.1:4200时，新修改的内容能正常渲染（访问Django的8000端口则不行）。

我的配置 #

Django模板代码（TemplateView指向的index.html） #

{% load static %} {% csrf_token %} <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>AngularWebapp</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="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <app-root></app-root> {% block javascript %} <script type="text/javascript" src="{% static 'runtime.js' %}"></script><script type="text/javascript" src="{% static 'polyfills.js' %}"></script><script type="text/javascript" src="{% static 'styles.js' %}"></script><script type="text/javascript" src="{% static 'vendor.js' %}"></script><script type="text/javascript" src="{% static 'main.js' %}"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> {% endblock %} </body> </html>

settings.py静态目录配置 #

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'angular', 'static'),
    os.path.join(BASE_DIR, 'angular-webapp', 'dist', 'angular-webapp'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

urls.py配置 #

from django.contrib import admin
from django.urls import path, re_path, include
from django.views.generic import TemplateView
from rest_framework import routers
from authentication.views import AccountViewSet, LoginView
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.contrib.staticfiles import views

router=routers.SimpleRouter()
router.register('accounts', AccountViewSet)

class IndexView(TemplateView):
    template_name = 'index.html'

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include(router.urls)),
    re_path(r'^api/v1/auth/login/$', LoginView.as_view(), name='login'),
    re_path(r'^.*/$', IndexView.as_view()),
    path('', IndexView.as_view()),
]

静态文件均存放在上述配置目录中，ng build的产物也输出到该目录。我已尝试删除dist文件夹重新构建，但问题依旧，访问Django端口仍显示旧内容，而ng serve完全正常。请问是否是我对ng build的工作机制存在误解？

嘿，我来帮你捋捋这个问题——你其实没误解ng build的机制，问题出在Django静态文件的查找逻辑和缓存上，结合你的配置，我整理了几个关键排查点：

1. 静态文件目录优先级冲突 #

你在STATICFILES_DIRS里同时配置了angular/static和Angular的dist目录，Django查找静态文件时是按列表顺序匹配的。如果angular/static里还留着旧的main.js、runtime.js这些文件，Django会直接加载它们，完全忽略dist里新构建的产物。

解决步骤： #

• 先去angular/static目录下检查，把和dist目录里同名的静态文件（比如main.js、styles.js）全部删掉，避免优先级冲突。
• 给Angular构建开启哈希文件名，这样每次构建的产物文件名会带上唯一哈希（比如main.abc123.js），彻底绕开缓存问题。修改你的angular.json：

  "projects": {
    "angular-webapp": {
      "architect": {
        "build": {
          "options": {
            "outputHashing": "all" // 默认可能是"none"或"media"，改成"all"即可
          }
        }
      }
    }
  }
  

• 访问Django页面时，用强制刷新（Ctrl+F5或Cmd+Shift+R）跳过浏览器本地缓存。

2. collectstatic遗留的旧文件 #

你配置了STATIC_ROOT，如果之前执行过python manage.py collectstatic，Django会把静态文件复制到STATIC_ROOT对应的目录里。开发环境下用runserver时，Django可能会优先加载这里的旧副本，而不是STATICFILES_DIRS里的新文件。

解决步骤： #

• 开发环境下不需要collectstatic，直接删除STATIC_ROOT对应的static目录，清除旧的收集文件。
• 如果是生产环境，每次构建Angular后，必须重新执行python manage.py collectstatic --noinput，把新的构建产物同步到STATIC_ROOT。

3. Angular构建输出路径是否正确 #

确认你的Angular项目angular.json里的outputPath和DjangoSTATICFILES_DIRS配置的路径完全一致：

"build": {
  "options": {
    "outputPath": "../angular-webapp/dist/angular-webapp" // 要和settings.py里的路径对应
  }
}

如果路径不对，构建的产物根本没放到Django能找到的目录，自然不会更新。

4. 开发环境更高效的替代方案 #

既然ng serve能正常热重载，你可以让Django代理Angular的开发服务器，这样既享受Angular的实时更新，又能通过Django端口访问：

• 创建proxy.conf.json文件（放在Angular项目根目录），把API请求转发到Django的8000端口：

  {
    "/api": {
      "target": "http://127.0.0.1:8000",
      "secure": false
    }
  }
  

• 运行Angular时用ng serve --proxy-config proxy.conf.json，这样访问127.0.0.1:4200时，API请求会自动转到Django，前端修改也能实时刷新。

总结一下，核心就是Django静态文件的优先级和缓存在捣乱，按上面的步骤排查，应该能很快解决问题。

内容的提问来源于stack exchange，提问作者Marcus Grass