For those times, when you ought to do things which you don’t want to do.
Requirements: Django > 1.8, Angular 8, 9 or above. I’ve done this Angular 9.Let’s jump directly into a pool, I’m guessing, you already have a basic Django setup, which is:
- Vritualenv setup
- Django project
- Static files and template files setupStart by installing angular cli into your local.
npm install -g @angular/cliIf you are on windows’, please set the path of the ng command. Otherwise, you can use
npm run ng <your ng command>- In Django, create a Landing view and URL pointing to that view. And render a template which you’re going to use for Angular. Let’s say
which is residing into Django templates dir.angular_index.html - Now, from command-line, create a new angular project into a Django static directory.
.ng new frontend - Now your Angular apps` basic structure is done, for testing, run
. This will compile your code and produce some files intong build
directory which will be created into adist
(your angular app) directory.Now go intofrontend
and include these compiled filesangular_index.html
,runtime-es2015.js
,polyfills.js
,styles-es2015.js
,vendor-es2015.js
into Django template JS block.main-es2015.js
<script type="type/javascript" src="{% static 'frontend/dist/runtime-es2015.js' %}"></script>
<script type="type/javascript" src="{% static 'frontend/dist/polyfills-es2015.js' %}"></script>
<script type="type/javascript" src="{% static 'frontend/dist/styles-es2015.js' %}"></script>
<script type="type/javascript" src="{% static 'frontend/dist/vendor-es2015.js' %}"></script>
<script type="type/javascript" src="{% static 'frontend/dist/main-es2015.js' %}"></script>And now you’re almost done, just add
<body>
<app-root></app-root>
<!-- your script files here in JS block -->
</body>into
angular_index.htmlpython manage.py runserverUp until now, everything is working fine, but the problem is, every time you do some code change, you have run
ng buildSo you might be thinking, why not use
ng serveng serveng buildRun
ng build --watchng build --watchangular_index.html<script type="type/javascript" src="{% static 'frontend/dist/runtime.js' %}"></script>
<script type="type/javascript" src="{% static 'frontend/dist/polyfills.js' %}"></script>
<script type="type/javascript" src="{% static 'frontend/dist/styles.js' %}"></script>
<script type="type/javascript" src="{% static 'frontend/dist/vendor.js' %}"></script>
<script type="type/javascript" src="{% static 'frontend/dist/main.js' %}"></script>For better configuration, you can get the environment from
settings.py if Just in case, if you add support for IE, there will extra file which will generate. You need to add that file to render everything perfectly.
Previously published at https://medium.com/@abheist/angular-and-django-integration-into-one-project-46dcfe240f60
