AWinterman/everything-is-terrible.md

## everything-is-terrible.md

      
    Raw
  

              everything-is-terrible.md
            
          
    Everyting on the internet about configuring angular and django to play nice together is garbage.

Refer to the angular docs over any tutorial out there because everytyhing else is garbage.
If anything mentions webpack, stop reading it, unless what you actually want is to learn about webpack.
If anybody mentions turning off CORS or CSRF protections, screaming inside is encouraged, but if you let it you your non-technical coworkers will look at you funny.

What you need to know is the following.
Angular's HTTP module will add the CSRF token if it was available. You just have to coordinate how your app will send it up with where angular looks for it. https://angular.io/guide/http#security-xsrf-protection
If you want to get the CSRF token from the webframework, (django in my case), you have to serve the front end from django. This is easy enough if you add the following to the JSON object at projects.your-dumb-project.architect.build.options:

outputPath: 'path/to/static/dir'
`optimization: false
sourceMap: true
Don't worry, when you pass the "prod" tag it will still optimize and not have sourcemaps, by default.

Likewise, you can suse ng serve with a proxy and it will work for anything that doesn't require a CSRF token. Good enough for some stuff I guess.
There's probably a snazzier way, but django stitches it all together for me with a dumb template that looks like this:
{% load static %}
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Home</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
      <!-- index.html -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <app-root>Loading...</app-root>
<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></body>
</html>
I now have a working angular app served by django, and I didn't have to disable any security settings.
I feel a lot of anger at all the folks instructing people to do so, even in dev. The fewer prod/dev differences you can manage the better.