Колба, обслуживающая приложение Angular с клиентской маршрутизацией

Question

Я настраиваю приложение, которое будет иметь простой сервер Flask, и я использую Typescript / Angular8 для внешнего интерфейса - я относительно новичок в сети и очень плохо знаком с Angular. Общая схема состоит в том, чтобы скомпилировать внешний интерфейс, а затем попросить Flask обслуживать файлы из каталога, в который они компилируются. При компиляции интерфейса у нас есть следующая конфигурация в angular.json:

"options" {
  "outputPath": "dist/static",
  "deployUrl": "/static/",
  "baseHref": "/static/",
  ...

Так что скомпилированные js / html / assets будут помещены в статическую папку.

Я будуНарисуйте минимальный пример проблемы, с которой я имею дело:

Скажем, у сервера фляги определена корневая конечная точка:

@app.route("/")
def index():
    return send_from_directory(config.dist_dir, 'index.html')

для обслуживания домашней страницы (где config.dist_dir этоstatic directory).

Теперь скажите, что я добавляю маршрутизацию к угловому интерфейсу, чтобы мой app.component.html просто содержал <router-outlet></router-outlet>, а домашний вид передавался отдельному компоненту (я называю это «Бла». "здесь).

С этой настройкой у меня есть базовый шаблон для app-routing.module.ts:

const routes: Routes = [
  { path: 'blah', component: BlahComponent }
  { path: '', component: BlahComponent }
];

Колба корректно обслуживает index.html, который отображает BlahComponentправильно, , но проблема в том, что к URL-адресу добавляется /static. Последующие запросы из браузера не будут работать, пока вы не удалите статический из URL.

Мой текущий обходной путь - простовключить следующий класс и использовать его какe LocationStrategy:

export class TempPathLocationStrategy extends PathLocationStrategy {
  prepareExternalUrl(internal: string): string {
    return super.prepareExternalUrl(internal).substr('/static'.length);
  }
}

На данный момент это работает, но я чувствую, что мне чего-то не хватает - какая-то конфигурация для маршрутизации на стороне клиента или для информации о пакете, которую я пропускаю.

Одна из проблем, связанных с этим обходным решением, заключается в том, что теперь вы можете взломать интерфейс только в том случае, если сервер тоже работает (ng serve хочет обслуживать из статической папки, но если вы удалите его из URL, он не сможет сохранитьвыступающий).