Angular - 构建后未处理的导航错误答案

【问题标题】：Angular - Unhandled Navigation Error after buildingAngular - 构建后未处理的导航错误
【发布时间】：2019-05-18 21:18:39
【问题描述】：

我通过以下命令构建了一个带有 2 条路线的简单 Angular 应用程序：

ng build --aot --prod --base-href ./

然后我打开位于dist 文件夹中的index.html 文件，应用程序运行但路由不起作用，我在控制台上收到以下警告：

希望能很好地解释我的问题。提前致谢。

【问题讨论】：

使用 ng serve 时是否正常工作？
@ashishpal 是的，它有效

标签： angular build angular2-routing

【解决方案1】：

如果您使用哈希路由并在 index.html 中按如下方式定义基本 href，则 Angular 路由有效。

<base href="#">

【讨论】：

这对我有用，我一开始已经设置了 Angular 路由，并不想恢复任何东西。
我的学校服务器托管不工作，这作为一个独立的伟大工程！
这似乎是最好的答案，也是最常见的用例。

【解决方案2】：

使用 Angular 路由引擎将强制您将应用托管在某个服务器上（例如 IIS、NodeJS 等）

没有路由的简单 Angular 应用可以在不将其托管在服务器上的情况下运行。

来自Angular docs：

Angular 应用程序非常适合使用简单的静态 HTML 服务器进行服务。您不需要服务器端引擎来动态组合应用程序页面，因为 Angular 是在客户端完成的。

如果应用使用 Angular 路由器，您必须配置服务器，以便在请求提供它没有的文件时返回应用的主机页面 (index.html)。

【讨论】：

为什么？会不会是路由系统的原因？
我认为你是对的，这是因为路由系统。看看这个link

【解决方案3】：

就我而言，我会得到：

未处理的导航错误：main.af3eff424835a3d5642f.js:1

因为我的基本网址设置为 https://

<base href="https://example.com" />

但我是通过 http:// 加载网站

http://example.com

解决方案是使用 https:// 网址或更改基本网址以允许通过 http 访问。

【讨论】：

【解决方案4】：

app/module.ts：

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


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

【讨论】：

感谢您提供答案。您能否编辑您的答案以包括对您的代码的解释？这将有助于未来的读者更好地了解正在发生的事情，尤其是那些刚接触该语言并难以理解概念的社区成员。

【解决方案5】：

正如benshabatnoam 所说，使用 Angular 路由引擎会迫使您将应用托管在某个服务器上。
在部署 App 之前，仅在演示案例中，您可以设置 RouterModule.forRoot(routes, { useHash: true }) 并使用 hash 进行路由，以避免将您的 App 托管在服务器中。

【讨论】：