How to load angular2 files to Django template?
<p>I have app structure like this: </p>

<pre><code>âââ project
|   |ââ templates
â   â   âââ index.html
â   âââ __init__.py
â   âââ models.py
â   âââ urls.py
â   âââ serializers.py
â   âââ views.py
âââ static
|   âââ app
|   â   âââ app.component.spec.ts
|   â   âââ app.component.ts
|   â   âââ app.route.ts
â   â   âââ component1.component.ts
|   â   âââ component2.component.ts 
â   â   âââ main.ts
|   âââ system.config.json
â   âââ tsconfig.json
â   âââ typings.json
âââ db.sqlite3
âââ LICENSE
âââ manage.py
</code></pre>

<p>and I'm trying to load angular2 files into my django template <code>index.html</code>, so the file looks like this:</p>

<pre><code>{% load static from staticfiles %}

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;base href=/ &gt; 
&lt;title&gt;Hello! &lt;/title&gt; 
&lt;meta charset=UTF-8&gt; 
&lt;meta name=viewport content="width=device-width,initial-scale=1"&gt; 


   &lt;script src="https://unpkg.com/core-js/client/shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/zone.js@0.6.25?main=browser"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/reflect-metadata@0.1.3"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('{%static '/app/main' %}').catch(function(err){ console.error(err); });
    &lt;/script&gt;

      &lt;link href="{%static '/css/stylesheet.css' %}"&gt;
      &lt;link href="{%static '/css/bootstrap.min.css' %}"&gt;
 &lt;/head&gt; 
 &lt;body&gt; 


    &lt;img src="{%static '/assets/logo.png' %}"&gt;&lt;/img&gt;
      &lt;as-my-app&gt;Loading...&lt;/as-my-app&gt;

  &lt;/body&gt; 
  &lt;/html&gt;
</code></pre>

<p>My problem is that all the static files load just fine, but my browser constantly shows error while loading <code>/static/app/main</code> saying it wasn't found. How come Django can't find it if it finds other static files?</p>

<p>You have nested single quotes and your file name is <code>main.js</code> not <code>main</code>, you need also to remove the first <code>/</code>. Let me know if the following line of code solves your issue:</p>

<pre><code>System.import("{% static 'app/main.js' %}")
</code></pre>

python django angular2 frontend