Angular serve可以正常工作,但Angular build无法更新文件。

5
我正在运行一个带有Angular前端和Django后端的项目。今天,当我在模板中更改了一些代码时,ng build没有更新。我发现它既不更新模板更改,也不更新组件更改。但是,当我运行ng serve并转到127.0.0.1:4200而不是Django端口8000时,新版本的更新会被呈现出来。
我的设置方式是,我有一个模板,Django使用TemplateView指向该模板:
{% 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输出的文件夹,例如静态加载从该文件夹中加载runtime.js等文件。

然而,从昨天开始,我在angular-webapp/src/app文件夹中所做的更改不会在ng build时更新。我尝试删除dist文件夹以创建一个新的,但这并没有改变任何事情。当它重新出现并运行项目时,它仍然以某种方式使用旧的布局,而ng serve则完美地工作。

我是否忽略了关于ng build的某些东西?

1个回答

8

这可能是缓存问题:你的文件名仍然相同,由于浏览器缓存了它们,它不会重新加载它们。

考虑使用--prod标志构建,其中包含多个其他标志,如--aot,但要解决您的问题,请尝试使用--output-hashing=all进行构建。

直接从ng build --help中获取:

--output-hashing=none|all|media|bundles 
  (String) Define the output filename cache-busting hashing mode.
  aliases: -oh <value>, --outputHashing <value>

3
我感觉自己太蠢了,盯着代码看了那么久,结果清空浏览器缓存就完全解决了。 - Marcus Grass
2
这个解决方案是为了“自动清除缓存”,不要期望用户自己清除他们的缓存! - user4676340
可以通过使用 cntrl + shift + r 进行重新加载来解决。这将进行强制重新加载,而不会从缓存中加载。 - Divins Mathew

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接