<p><strong>我也遇到了同样的问题,下面是我如何解决的;</strong></p>
<h2><em>步骤1</em></h2>
<p>目录结构如下:</p>
<p>+-MyAppName<br/>
+--服务器应用程序<br/>
+---//…此处有烧瓶文件<br/>
+--客户机app<br/>
+---节点模块<br/>
+---应用程序<br/>
+---//…更多节点+角度应用程序文件</p>
<p>我使用以下代码在flask应用程序的URL<code>.../client-app/...</code>中公开了ClientApp文件夹:</p>
<pre><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)
</code></pre>
<h2><em>步骤2</em></h2>
<p>去看看你的<code>index.html</code>文件(我把我的放在<code>ServerApp\templates\index.html</code>这样我就可以做<code>render_template('index.html')</code>)然后让它看起来像这样:</p>
<pre><code><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>
</code></pre>
<p><strong>路径前面的“客户端应用程序”是我在</strong></p>
<h2><em>步骤3</em></h2>
<p>将客户端应用程序的包查找程序配置为使用设置的路由(在本例中为“client-app/…”)。我使用system.js,因此我的<code>systemjs.config.js</code>文件如下所示:</p>
<pre><code>(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);
</code></pre>
<p><strong>我只修改了<code>map</code>变量</strong></p>
<p>上帝保佑!</em></p>