将基于 Angular 7 路由的应用程序作为 `file://` 运行（无服务器）答案

【问题标题】：Run angular 7 routing-based app as `file://` (without server)将基于 Angular 7 路由的应用程序作为 `file://` 运行（无服务器）
【发布时间】：2019-05-05 10:59:57
【问题描述】：

我有一个基于路由的角度应用程序，我想要将它作为html文件捆绑到WebView应用程序中，以便~/app_path/index.html访问它

我用ng build --prod --output-path ./../ng-build 成功构建了它，它在浏览器中加载良好。

问题是，如果我使用路由器模块，我会收到Unhandled Navigation Error 警告并且路由不起作用。

我尝试在useHash 中使用哈希

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

并预计它可能适用于路线，例如

`~/app_path/index.html#settings`
`~/app_path/index.html#profile`
`~/app_path/index.html#details`

但这无济于事 - 应用程序启动后路由器立即崩溃

在这种file:// 模式下实现路由有什么解决方案或变通方法吗？或者可能是在此处的应用程序中使用的另一种架构方法，而不是路由。

【问题讨论】：

调用这样的路由怎么样：`~/app_path/index.html/#/settings`？
我预计它应该可以工作，但应用程序在加载时崩溃。刚刚找到了一个解决方案 - useHash 应该与绝对文件系统路径配对，该路径可以根据此评论从位置获取 github.com/angular/angular/issues/13948#issuecomment-302727428

标签： angular angular-routing angular-router

【解决方案1】：

根据this thread 设置<base> href attr 到绝对路径有助于解决路由问题

<script>document.write('<base href="' + document.location + '" />');</script>

所以基础元素看起来像这样

<base href="file:///Users/guest/build/index.html">

路由演示：

【讨论】：