在此服务器上找不到请求的 URL - Angular 2 Routing with Google Cloud答案

【问题标题】：The requested URL was not found on this server - Angular 2 Routing with Google Cloud在此服务器上找不到请求的 URL - Angular 2 Routing with Google Cloud
【发布时间】：2017-01-20 18:26:52
【问题描述】：

我目前遇到的问题是当我尝试输入特定路线时，例如：“www.example.com/projects”。这会产生：

错误：未找到

在此服务器上找不到请求的 URL /projects。

注意：通过 UI 导航到该路由时不会发生这种情况，只会在刷新页面或输入特定 url 时发生。

值得一提的是，我使用的是谷歌云平台，我首先使用 angular cli 设置了应用程序。

我已经看到很多事情表明我必须为每条路线提供 index.html，但是我找不到任何关于如何做到这一点的文档，或者即使这是正确的方法。

我不确定你需要什么来帮助我解决这个问题，所以我会更新你需要帮助的内容。

我让哈希位置策略工作，但我正在尝试让路径定位策略工作。

感谢大家的帮助！

【问题讨论】：

尝试在angularjs2中使用哈希定位策略
我已经探索了 Hash Location Strategy 选项并且我得到了它的工作但是我想探索 Path Location Strategy 来尝试让它工作。有什么想法吗？

标签： angular google-cloud-platform

【解决方案1】：

在您的 app.yaml 文件中，将处理程序的正则表达式更新为如下所示：

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

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

dist 文件是 cli 的静态输出。如果您的应用使用更多，请在第一个处理程序中添加任何文件扩展名。

希望有效果

【讨论】：

谢谢它完美的工作！我曾经有过类似的东西，但它从来没有用过，一定是有什么东西搞砸了。

【解决方案2】：

为此，我使用了 Angular 中可用的 HashLocationStrategy。将 PathLocationStrategy 部署到 Google 云实例上时，我无法在我的 Angular 应用程序中使用它。如果我使用 PathLocationStrategy，则会收到错误消息：

错误：未找到

在此服务器上找不到请求的 URL /projects。

为了实现 HashLocationStrategy，我只是在 app.module.ts 中使用了两行代码

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})

export class AppModule

在这一切之后，我意识到最好使用 angular 可用的默认路径策略，即 PathLocationStrategy。正如 Nicholas 在上述答案中所说，我无法在我使用 angular-cli v1.4 创建的项目结构中找到 app.yaml 文件

如果有人能在这里指导我正确的方向，那就太好了。

【讨论】：

find . -type f -name "app.yaml"。该命令将定位任何丢失的app.yaml 文件（如果存在）。但是我不认为角度 CLI 会创建 app.yaml - 这纯粹是谷歌应用引擎的构造。

【解决方案3】：

在路由器模块中添加 useHash:true 它应该适用于 Angular 5 和 java 像这样

@NgModule({
  imports: [
      RouterModule.forRoot(routes,{useHash:true})
],

【讨论】：

【解决方案4】：

1- 您的服务器端应用程序应该只呈现基本路由"/"，以便您的单页应用程序可以处理到/projects 的路由。

2- 您也可以通过在客户端路由中添加哈希 # 前缀来解决此问题，例如 "www.example.com/#/projects"

在 AngularJs 中，您可以通过将以下代码添加到您的 config 函数来做到这一点

$locationProvider
  .html5Mode(false);

【讨论】：

哪个文件是我要放置的配置文件？我正在尝试找到一个 app.js 文件，但 Angular 2 CLI 的做法似乎有所不同？还有什么方法可以在不显示“#”的情况下做到这一点？

【解决方案5】：

如果您使用 PathLocationStrategy（html5 历史记录），您需要有一个处理程序来捕获这些动态路线

runtime: python37

handlers:
# index files
- url: /([^.]+)/?$  # urls with no dot in them
  static_files: dist/index.html
  upload: dist/index.html

# site root
- url: /
  static_files: dist/index.html
  upload: dist/index.html

# everything else
- url: /(.*)
  static_files: dist/\1
  upload: dist/(.*)

https://cloud.google.com/appengine/docs/standard/python/config/appref#handlers_element

【讨论】：