Run angular 7 routing-based app as `file://` (without server)

Question

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.

what about calling a route like : ``~/app_path/index.html/#/settings`? — Jason White
– Jason White, Commented May 5, 2019 at 11:38
I expected it should work but the app crashes on the load. just found a solution - useHash should be paired with absolute filesystem path that can be taken from location as per this comment github.com/angular/angular/issues/13948#issuecomment-302727428 — godblessstrawberry
– godblessstrawberry, Commented May 5, 2019 at 11:45

godblessstrawberry · Accepted Answer · 2019-05-05 12:12:16Z

3

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:

edited May 5, 2019 at 12:12

answered May 5, 2019 at 11:50

godblessstrawberry

5,1584 gold badges45 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Run angular 7 routing-based app as `file://` (without server)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related