以 `file://` 形式运行基于 angular 7 路由的应用程序(无服务器) [英] Run angular 7 routing-based app as `file://` (without server)

问题描述

我有 基于路由的 Angular 应用程序，我想要的是将它作为 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:// 模式下，是否有任何解决方案或解决方法来实现路由?或者也许是在应用程序中使用的另一种架构方法，而不是路由.

解决方案

as per

I have angular app that is based on routing, what I want is to bundle it into WebView application as html file so it will be accessible by ~/app_path/index.html

I successfully built it with ng build --prod --output-path ./../ng-build and it loads fine in browser.

The problem is if I use router module I will get Unhandled Navigation Error warning and routes just don't work.

I tried to use hashes with useHash

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

and expected it might work with routes e.g.

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

but it doesn't help - router crashes immediately after app launch

Is there any solution or workaround to achieve routing in this file:// mode? Or maybe another architecture approach to use in the app here instead of routing.

解决方案

as per this thread setting <base> href attr to absolute path helps to solve routing issue

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

so the base element will look like this

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

routing demo:

这篇关于以 `file://` 形式运行基于 angular 7 路由的应用程序(无服务器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！