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 setup Start by installing into your local. angular cli install -g @angular/cli npm If you are on windows’, please set the path of the ng command. Otherwise, you can use for the rest of the article. 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 into directory which will be created into a (your angular app) directory.Now go into and include these compiled files , , , , into Django template JS block. ng build dist frontend angular_index.html runtime-es2015.js polyfills.js styles-es2015.js vendor-es2015.js 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  </ > body into and run your python server by . Goto your defined URL for your angular app and you’ll be seeing the app. angular_index.html python manage.py runserver Up until now, everything is working fine, but the problem is, every time you do some code change, you have run to compile the angular code and then see the changes reflect in the browser. ng build So you might be thinking, why not use , yes is a great option. But the sad part is, it does not provide us with the compiled files. it saves those files in the memory. So we need to use watch option in for development purpose. ng serve ng serve ng build Run into a terminal and it will run hot reload your project with every file change. But now, your browser will not show anything. Because at watch state, produces different filenames without postfix of es2015 . So you need to change those files names in the and include the following files. ng build --watch ng build --watch angular_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 and with the help of condition, you can set the files according to the environment. 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. 🙏 — Abhishek Kumar Singh Previously published at https://medium.com/@abheist/angular-and-django-integration-into-one-project-46dcfe240f60

Django, Celery, Redis and Flower Implementation

🦄  Here you go ✨

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Angular and Django Integration in One Project

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Django, Celery, Redis and Flower Implementation

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Django, Celery, Redis and Flower Implementation

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps