wie kombinieren angular2 mit jinja2 Vorlagen und Kolben

Ich bin erste Schritte auf dem Eckigen 2 nach viel Erfolg mit Angular 1. Ich folgte sowohl die Quickstart und die Tour der Helden tutorials und alles funktioniert wie ein Charme.

Den lite server gekickt wird ausgeschaltet, ich sehe tsc läuft im watch-Modus und ich habe sogar BrowserSync ist angeschlossen. Super!!!

Jedoch, ich müssen beginnen, die Dinge ein bisschen mehr Reale Welt.

Anstelle der Verwendung von lite-server, wie bekomme ich alle diese arbeiten mit einem Kolben dev oder gunicorn server, dienen die erste index.html Datei als erbracht jinja template?

Geben das Fläschchen dev-server eine sehr näive versuchen, ich im Grunde kopieren Sie den Inhalt des Beispiels index.html aus dem tutorial in mein jinja template, dann laufen npm run tsc:w und schließlich feuern meine Flasche dev-server und das beste hoffen. Dinge kompilieren in Ordnung. Aber im browser sehe ich Probleme:

angular2-polyfills.js:332 Error: SyntaxError: Unexpected token <
    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`

Blick auf die Täter transpile main.js Datei ich sehe:

(function(System, SystemJS, require) {<!doctype html>
<html>
<head lang='en'>

So, ja, das ist nicht gonna Arbeit...klar meine Verkabelung ist drunter und drüber.

Gibt es eine Menge schwarze Magie geht weiter mit den shims, die polyfills, reactive extensions, systemjs, angular2 selbst, und dann werfen in den tsc-und lite-server. Zugegeben, ich habe nicht alle diese unten noch und es wird einige Zeit dauern, aber ich bin der Hoffnung, um mein Projekt in einem sauberen Zustand ziemlich schnell.

(Ich bin nicht dagegen, mit lite server (BrowserSync ist ein nettes extra) in Entwicklung so lange, wie ich ihn konfigurieren, um den proxy die real-Kolben-server, die zurückkehren wird der render-jinja-templates.)

Update

Hier ist der eigentliche template-index-Datei mit einigen kleinen änderungen, die ich gemacht habe:

<!doctype html>
<html>
  <head lang="en">
    {% block head %}

    <meta charset="utf-8">

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

    {% endblock %}
  </head>
  <!-- 3. Display the application -->
  <body>
    {% block content %}{% endblock %}

    <my-app>Loading...</my-app>

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

Sie besser zu einer Quelle der Vorlage.
sichere Sache. guter Punkt...ich habe den template-code der Frage.
I ' TS komisch, Sie haben den HTML-Code in die main.js. Es sollte in der Ausgabe von "localhost:NNN" oder was auch immer Sie verwenden für die Zustellung des Dokuments. Ich denke, es kann verbunden werden mit den reactive extensions (ist es RreactiveJS?). Versuchen Sie diese deaktivieren?
richtig, es ist seltsam. wenn ich kommentiere einfach das System.config() und System.import () - code der html wird serviert, wie man erwarten würde, und natürlich nichts passiert. Die main.js Datei mit dem HTML-ich weiß wirklich nicht, warum, noch wie Sie zu Debuggen. Diese Datei ist nur einige ätherisch-Datei, die existiert nicht wirklich irgendwo auf dem Dateisystem, also bin ich nicht sicher, wie Sie Sie Debuggen, wie es generiert wird.

InformationsquelleAutor lostdorje | 2016-04-04

Ich hatte das gleiche problem und hier ist, wie ich es gelöst;

Schritt 1

Mit einer directory-Struktur wie folgt:

+- MyAppName

+-- ServerApp

+ - - - //...- Kolben-Dateien hier

+-- ClientApp

+--- node-Module

+--- app

+--- //...mehr Knoten+Winkel-Dateien der Anwendung

Ausgesetzt ich die ClientApp in meinem Ordner flask Anwendung, die in der URL .../client-app/... mit dem folgenden code:

from flask import Flask, send_from_directory
import os

BASE_URL = os.path.abspath(os.path.dirname(__file__))
CLIENT_APP_FOLDER = os.path.join(BASE_URL, "ClientApp")

# This is required by zone.js as it need to access the
# "main.js" file in the "ClientApp\app" folder which it
# does by accessing "<your-site-path>/app/main.js"
@app.route('/app/<path:filename>')
def client_app_app_folder(filename):
    return send_from_directory(os.path.join(CLIENT_APP_FOLDER, "app"), filename)

# Custom static data
@app.route('/client-app/<path:filename>')
def client_app_folder(filename):
    return send_from_directory(CLIENT_APP_FOLDER, filename)

Schritt 2

Den Kopf über Ihre index.html Datei (ich legte mir bei der ServerApp\templates\index.html so, dass ich mich einfach render_template('index.html')) und machen es wie folgt Aussehen:

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="client-app/assets/css/style.css">

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="client-app/node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="client-app/node_modules/zone.js/dist/zone.js"></script>
    <script src="client-app/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="client-app/node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="client-app/systemjs.config.js"></script>
    <script src=""></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

die client-app' vorangestellt, um die Wege ist der Weg, den ich wählte, um meine client_app_folder() Funktion bei

Schritt 3

Konfigurieren Sie Ihre client-Anwendung Paket-finder-verwenden der festgelegten route ('client-app/..." in diesem Fall). Ich benutze system.js und daher machte ich meine systemjs.config.js - Datei wie folgt Aussehen:

(function(global) {

  //map tells the System loader where to look for things
  var map = {
    'app':                        'client-app/app', //'dist',
    'rxjs':                       'client-app/node_modules/rxjs',
    'angular2-in-memory-web-api': 'client-app/node_modules/angular2-in-memory-web-api',
    '@angular':                   'client-app/node_modules/@angular'
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  //add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  }

  //filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

Ich nur geändert, das map variable

Godspeed!

Vielen Dank für die ausführliche Antwort! Einrichtung der route '/app/... " für zone.js war ein großer Schlüssel für mich. Nun brauche ich nur noch die Zeit finden, zurück zu gehen und hakte dieser und meine Lieblings-3rd-party-Eckige 1-Richtlinien verdrahtet als gut.

InformationsquelleAutor Archy

1

Bei der Suche nach der Antwort auf diese Frage wurde ich daran erinnert, über die änderung der interpolation Zeichen in den Winkel-1. Finden konnte, wo die zwei das tun, Winkel-2, aber es war einfach genug, um zu ändern, auf die jinja2 Seite. Legen Sie die jinja2 Umgebung Optionen Zeichen, aber Sie wollen mit diesem:
```
JINJA_ENV = jinja2.Environment(
  loader=jinja2.FileSystemLoader(os.path.dirname(__file__)),
  extensions=['jinja2.ext.autoescape'],
  block_start_string= '{[%',
  block_end_string='%]}',
  variable_start_string='{[',
  variable_end_string=']}',
  comment_start_string='{#',
  comment_end_string='#}',
  autoescape=True
)
```
Ich hoffe, ich bin mit kompatiblen Streicher hier, denke, ich werde es herausfinden!
(siehe http://jinja.pocoo.org/docs/dev/api/ Umgebung Optionen)
- Sie können auch ändern, die auf der eckigen Seite auch über das interpolation-Anbieter, wenn Sie dies wünschen.
InformationsquelleAutor A. Pearce

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.