Angular serve working, Angular build not updating files

Question

I'm running a project with an Angular front-end and a Django back-end. Today when I changed some code in the templates the ng build didn't update. I have discovered that it neither updates template changes nor component changes. However, when I run ng serve instead and go to 127.0.0.1:4200 instead of the Django port 8000 the new updates versions are rendered.

The way I have it set up is that I have a template that Django points to with TemplateViev :

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

And the static directory layout looks like this in 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')

And 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()),
]

Which is the only place I have static files, and which is where the files from ng build is put, IE. the static load loads the runtime.js etc. from the folder where it's output when i ng build.

However, from yesterday the changes I make to my app in the angular-webapp/src/app folder doesn't get updated when I ng build. I have tried removing the dist folder to create a fresh one, but that doesn't change anything. When it comes back and I run the project it still somehow uses the old layout while ng serve works perfectly.

Is it something about how ng build works that I am missing?

user4676340 · Accepted Answer · 2018-05-24 14:29:51Z

8

It's probably a cache busting issue : your files still have the same name, and since they're cached by the browser, it doesn't reload them.

consider building with the --prod flag, which contains several other flags such as --aot, but to correct your issue, try building with --output-hashing=all.

Directly from ng build --help :

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

answered May 24, 2018 at 14:29

user4676340

Sign up to request clarification or add additional context in comments.

3 Comments

Marcus Grass Over a year ago

I feel so damn stupid, clearing the browser cache completely solved it after staring at my code for so long.

user4676340 Over a year ago

This solution is for "automatic cache clearing", don't expect your users to clear their cache on their own !

Divins Mathew Over a year ago

Could've solved by reloading using cntrl + shift + r. This will do a force reload, without loading from cache.

Collectives™ on Stack Overflow

Angular serve working, Angular build not updating files

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related