有一次，我在Angular上新建了一个应用程序，并尝试在Heroku上运行时，我也想要同时使用用Python编写的后端应用程序。
那时，我想到可以将后端作为Python服务器，将前端作为Angular，于是我建立了这个应用程序的步骤备忘录。

开发环境

我們選擇了Python伺服器，採用了Flask。
* Flask 1.0.2
* Angular CLI 6.1.1

使用Angular构建应用程序

为了在Flask中显示Angular应用程序，需要构建Angular应用程序。
默认情况下，构建时应该创建一个名为dist的目录。该目录中的文件将用作公开使用。
在这里，我们创建了一个用于测试的应用程序，并列出了构建的命令。
test组件被创建用于后续的Angular路由设置。

$ ng new MyApp
$ cd MyApp
$ ng g component test
$ ng build --prod

显示使用Flask和Angular创建的应用程序。

我們正在進行顯示剛建構的文件的配置。

# -*- coding:utf-8 -*-
import sys
from flask import Flask


#import MeCab

app = Flask(__name__, static_url_path='', static_folder='./dist/MyApp')
app.config['JSON_AS_ASCII'] = False

@app.route('/', methods=['GET'])
def getAngular():
    return app.send_static_file('index.html')

if __name__ == '__main__':
    app.run()

静态文件夹=’./dist/MyApp’

请在此处指定构建的Angular应用程序。

@app.route(‘/’, methods=[‘GET’])
def 获取Angular():
return app.send_static_file(‘index.html’)

我进行了路由设置，并将其配置为显示index.html。

$ python main.py

我們執行了上述的flask並在http://localhost:5000 上進行訪問，這樣我們使用Angular所建立的應用程序就會顯示出來。

Angular路由设置

我已经使用上述方法成功地展示了Angular应用。
然而，在设置了Angular路由并实现了基于URL的页面跳转时，出现了页面跳转不正确，显示404错误的问题。
我推测这是因为在查阅了Flask的设置后被判断为没有设置路由，因此导致了错误。
虽然我可以使用Angular的路由导航等方法进行页面跳转，但是当重新加载页面时，仍然会显示404错误。
由于不希望重新加载页面时出现404错误，我更改了Angular的设置，通过哈希链接和片段形式将页面与URL对应起来，以解决这个问题。
（类似于< url>/#/test 这样的格式）

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { RouterModule, Routes } from '@angular/router';
const myRoutes = [
  { path: 'test', component: TestComponent },
];

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(myRoutes,{useHash:true})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

const myRoutes = [
{ 路径: ‘测试’, 组件: 测试组件 },
];

在这里，我们设置了页面跳转的路由。我们在这里注册了一个名为`test`的路径。

RouterModule.forRoot(myRoutes, { useHash: true }) 可以翻译成以下方式：
RouterModule.forRoot(myRoutes, { useHash: true })

通过在设置路由的地方启用useHash，在Angular的路由中将其更改为哈希链接和片段形式。试着启动Flask，并尝试访问http://localhost:5000/#/private，也可以成功显示页面。
在这种情况下，即使按下刷新按钮，也不会返回404错误，所以我们成功地展示了Angular应用！