Question

在Angular 1取得巨大成功后，我开始使用Angular 2.我遵循了Quickstart和Tour of Heroes教程，一切都像魅力一样。

Lite服务器开始启动，我看到tsc在监视模式下运行，我甚至看到BrowserSync被连接起来。太好了！

然而，我需要开始让事情变得更加现实。

如何使用lite dev或gunicorn服务器而不是使用lite服务器，将初始index.html文件作为呈现的jinja模板提供？

给烧瓶开发服务器一个非常小的尝试，我基本上将示例index.html的内容从教程复制到我的jinja模板中，然后运行npm run tsc:w并最终启动我的烧瓶开发服务器并希望最好的。事情编译得很好。但是在浏览器中我看到了问题：

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`

查看罪魁祸首transpile main.js文件，我看到了：

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

所以，是的，这不会起作用......显然我的布线很乱。

垫片，polyfill，反应扩展，systemjs，angular2本身有很多黑魔法，然后在tsc和lite服务器中抛出。不可否认，我还没有完成所有这些工作，这需要时间，但我希望能够很快让我的项目进入理智状态。

（我不介意在开发中使用lite服务器（BrowserSync是一个很好的特权），只要我可以配置它来代理将返回渲染jinja模板的真正的烧瓶服务器。）

更新

这是实际的模板索引文件，我做了一些小改动：

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

Answer 1

我遇到了同样的问题，这就是我解决问题的方法;

第1步

目录结构如下：

+ - MyAppName
+ - ServerApp
+ --- //...flask文件在这里
+ - ClientApp
+ ---节点模块
+ --- app
+ --- //...更多节点+角度应用程序文件

我使用以下代码在我的烧瓶应用程序中的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>

＆＃39;客户端应用＆＃39;前面的路径是我选择在

中公开client_app_folder()函数的路线

第3步

配置客户端应用程序的程序包查找器以使用设置的路由（＆＃39; client-app /...&# 39;在这种情况下）。我使用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变量

一帆风顺！

Answer 2

在寻找同一个问题的答案时，我被提醒要更改角度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/环境选项）

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

2 个答案:

第1步

第2步

第3步