Angular 2 和 Google App Engine，设置基本 href，重新加载子路由失败，服务器端路由答案

【问题标题】：Angular 2 & Google App Engine, set base href, reloading child routes fails, server-side routingAngular 2 和 Google App Engine，设置基本 href，重新加载子路由失败，服务器端路由
【发布时间】：2017-02-01 17:35:41
【问题描述】：

编辑：见下面的答案。由于 Google App Engine 中的路由，这是服务器端问题，而不是客户端相关问题。

我有一个 Angular-CLI ng2 应用程序，我在其中设置了 <base href="/admin/">

在路由时，一切都可以正常运行。但是，当我在 /admin/forms 等子路由上并重新加载页面时，会收到资源不可用的 404 错误。

来自app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {DashboardComponent} from "./main/dashboard/dashboard.component";
import {AdminComponent} from "./main/admin/admin.component";
import {FormsComponent} from "./main/components/forms/forms.component";

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: '',
        component: DashboardComponent,
      },
      {
        path: 'forms',
        component: FormsComponent
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class RoutingModule { }

来自控制台错误日志：

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/admin/forms

使用 app.yaml (Google App Engine) 的服务器端路由：

handlers:
- url: /admin/(.+)
  static_files: dist/\1
  upload: dist/(.*)
- url: .*
  static_files: dist/index.html
  upload: dist/index.html

该错误仅在从子路由重新加载页面或尝试直接访问 url 时发生。从 sidenav 服务访问路由时，页面正确加载。

【问题讨论】：

能否请您添加您的路线，我们不介意读者：P
404 绝对是服务器端问题。请发布确切的错误消息。
如果服务器报404 "localhost:8080/admin/forms" not found，只能说明2种情况。请求未重定向到index.html 或index.html 不存在。
是的，确认它必须是服务器端的。当应用程序通过 ng serve 运行时工作。将进一步调查。

标签： google-app-engine angular angular2-routing

【解决方案1】：

我正在链接 this SO post 和 jay khimani's blog 以了解我收到错误的原因。

这些错误与 Angular 2 无关，而是与 Google App Engine 的 app.yaml 处理程序中正则表达式的错误顺序有关。

我最初使用 Jay 的博客将我的 app.yaml 处理程序设置为：

handlers:
  - url: /admin/(.+)
    static_files: dist/\1
    upload: dist/(.*)
  - url: .*
    static_files: dist/index.html
    upload: dist/index.html

但是，我将手动加载的任何路由都会被第一个正则表达式 (/admin/(.+)) 捕获。因此，我将提供静态文件的路由更改为更具体：

handlers:
  - url: /(.*\.(js|map|css|png))$
    static_files: dist/\1
    upload: dist/.*\.(js|map|css|png)$

  - url: .*
    static_files: dist/index.html
    upload: dist/index.html

这为我解决了路由页面重新加载问题。

【讨论】：