how to combine angular2 with jinja2 templates and flask
<p>I'm getting started on Angular 2 after much success with Angular 1. I followed both the <a href="https://angular.io/docs/ts/latest/quickstart.html" rel="nofollow">Quickstart</a> and the <a href="https://angular.io/docs/ts/latest/tutorial/" rel="nofollow">Tour of Heroes</a> tutorials and everything works like a charm.</p>

<p>The lite server gets kicked off, I see <code>tsc</code> running in watch mode and I even see BrowserSync is hooked up. Great!</p>

<p>However, I need to start making things a bit more real world.</p>

<p><strong><em>Instead of using lite server, how do I get all this working using a flask dev or gunicorn server, serving the initial index.html file as a rendered jinja template?</em></strong></p>

<p>Giving the flask dev server a very näive try, I basically copy the contents of the example index.html from the tutorial into my jinja template, then run <code>npm run tsc:w</code> and finally fire up my flask dev server and hope for the best. Things compile fine. But in the browser I see problems:</p>

<pre><code>angular2-polyfills.js:332 Error: SyntaxError: Unexpected token &lt;
    at ZoneDelegate.invoke (http://127.0.0.1:5000/static/node_modules/angular2/bundles/angular2-polyfills.js:332:29)
    at Zone.run (http://127.0.0.1:5000/static/node_modules/angular2/bundles/angular2-polyfills.js:227:44)
    at http://127.0.0.1:5000/static/node_modules/angular2/bundles/angular2-polyfills.js:576:58
Evaluating http://127.0.0.1:5000/app/main.js
Error loading http://127.0.0.1:5000/app/main.js`
</code></pre>

<p>Looking at the culprit transpile main.js file I see:</p>

<pre><code>(function(System, SystemJS, require) {&lt;!doctype html&gt;
&lt;html&gt;
&lt;head lang='en'&gt;
</code></pre>

<p>So, yeah, that's not gonna work...clearly my wiring is haywire.</p>

<p>There is a lot of black magic going on with the shims, the polyfills, reactive extensions, systemjs, angular2 itself, and then toss in tsc and lite server. Admittedly, I don't have all this down yet and it will take time, but I'm hoping to get my project into a sane state fairly quickly.</p>

<p>(I don't mind using lite server (BrowserSync is a nice perk) in development as long as I can configure it to proxy the real flask server which will return the render jinja templates.)</p>

<p><strong>Update</strong></p>

<p>Here is the actual template index file with some minor changes that I've made:</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head lang="en"&gt;
    {% block head %}

    &lt;meta charset="utf-8"&gt;

    &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;    
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;!-- 1. Load libraries --&gt;
    &lt;!-- IE required polyfills, in this exact order --&gt;
    &lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"&gt;&lt;/script&gt;   
    &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script&gt;
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    &lt;/script&gt;

    {% endblock %}
  &lt;/head&gt;
  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
    {% block content %}{% endblock %}

    &lt;my-app&gt;Loading...&lt;/my-app&gt;

    &lt;script&gt;
      (function(globals) {
        this.MyConfig = {
          staticDir: '{{ config["STATIC_DIR"] }}'
        };
      }(this));
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>