如何将angular2与jinja2模板和flas结合起来

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`

<!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">   <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>  <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> {% endblock %} </head>  <body> {% block content %}{% endblock %} <my-app>Loading...</my-app> <script> (function(globals) { this.MyConfig = { staticDir: '{{ config["STATIC_DIR"] }}' }; }(this)); </script> </body> </html>

2条回答

网友

1楼 · 编辑于 2024-04-28 13:55:40

在寻找同一问题的答案时，我被提醒要更改角度1中的插值字符。可以找到两个在角2上的位置，但是它很简单，可以在jinja2上改变。根据需要设置jinja2环境选项字符：

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
)

希望我在这里使用兼容的字符串，我想我会发现！（请参见http://jinja.pocoo.org/docs/dev/api/环境选项）

网友

2楼 · 编辑于 2024-04-28 13:55:40

我也遇到了同样的问题，下面是我如何解决的；

步骤1

目录结构如下：

+-MyAppName
+--服务器应用程序
+---//…此处有烧瓶文件
+--客户机app
+---节点模块
+---应用程序
+---//…更多节点+角度应用程序文件

我使用以下代码在flask应用程序的URL.../client-app/...中公开了ClientApp文件夹：

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)

步骤2

去看看你的index.html文件（我把我的放在ServerApp\templates\index.html这样我就可以做render_template('index.html')）然后让它看起来像这样：

<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>

路径前面的“客户端应用程序”是我在

步骤3

将客户端应用程序的包查找程序配置为使用设置的路由（在本例中为“client-app/…”）。我使用system.js，因此我的systemjs.config.js文件如下所示：

(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);

我只修改了map变量

上帝保佑！

步骤1

步骤2

步骤3

相关问题更多 >

编程相关推荐

热门问题

热门文章