ルーティング設定を行ったAngularアプリをFlaskで動かす

新たに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で作成したアプリを表示

上記でビルドしたファイルを表示するための設定を行っていきました。

main.py

# -*- 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()

static_folder='./dist/MyApp'

ここにビルドしたAngularアプリを指定します。

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

ルーティングの設定を行ない、index.htmlを表示するように設定しました。

$ python main.py

上記でflaskを実行し、http://localhost:5000 にアクセスすることでAngularで作成したアプリが表示されるようになりました。

Angularのルーティング設定

上記までの方法でAngularのアプリを表示することができました。
しかし、Angularでルーティングを設定しURLによる画面遷移を実装した際に、正しくページ遷移がされず404が表示されてしまうということが起きてしまいました。
Flaskの設定を参照してしまい、ルーティングが設定されていないと判定されてしまうのでエラーになってしまったのが原因と推測しています。
一応AngularのRouterのNavigateなどを使えば画面遷移することができたのですが、リロードをすると404が表示されてしまいました。
リロードした際に404が表示されるのはちょっと嫌だったので、Angularの設定を変更しハッシュリンク・フラグメント形式でページとURLを対応付けることでこの問題を解決しました。
( < url>/#/test みたいな形式です)

app.module.ts

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 = [
{ path: 'test', component: TestComponent },
];

ここで、ページ遷移のルーティングを設定しています。ここではtestというパスを登録しました。

RouterModule.forRoot(myRoutes,{useHash:true})

ルーティングの設定を行う箇所にてuseHashを有効にすることで、Angularのルーティングがハッシュリンク・フラグメント形式に変更することができました。試しにFlaskを起動し、http://localhost:5000/#/private にアクセスしてみても画面を表示することができました。
この状態でリロードを押しても404が返ってこなかったので、無事Angularアプリを表示することができました！