Deeplink without hash

This code works to deeplink without the hash except on initial load in a browser.

imports: [
IonicModule.forRoot(MyApp,
{ locationStrategy: 'path' },{
  links: [
      { component: Page1, segment: 'about', name: 'About' },
      { component: Page2, segment: 'home', name: 'Home' }
    ]
})

]

If you went directly to somedomain.com and then choose a page, the linking works with no hash.

But if you go directly to somedomain.com/about - it does not work with the error “Cannot GET /about”

What am I missing?

1 Like

If your server is not configured to serve sub directories, then you will get this message.
You need to direct routes such as /about to the root index.html

The first request is always handled by the webserver itself, later when your app is already loaded JS can take over any clicks and that’s why your code works. When you start the first request with /about your server will look for a file or folder named about that is not there.

As @kemalcany said, you need to configure your server to reply to all requests by serving your index.html so that your JS code then can take over and apply your code to return the correct page.

Wow, what an obvious oversight. I was so caught up in getting the Hash out of the link that I failed to see this is actually a link to a directory.
So, with this in mind… although it looks clumsy, linking with the hash seems more realistic, as without indicates it is going to a directory - that does not exist.

I can give you an example of how I’m handling it, but basically you need to use Nginx (or something equivalent) and redirect requests to index.html.

Since I’m using Caddy server, here’s a sample of my configuration:

http://{$APP_HOST} {
	gzip
	header / Vary "Accept-Language, Cookie"
	rewrite {
		if {file} not favicon.ico
		if {file} not manifest.json
		if {file} not service-worker.js
		if {path} not_has /assets
		to {path} {path}/ /index.html
	}
	root {$APP_ROOT}
	log stdout
	errors stdout
}

APP_HOST and APP_ROOT are just environment variables with the desired URL and runnable build location (usually, www/build on Ionic)

2 Likes

This seems to be working with htaccess:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*?)[^/]+/?$ $1index.html [L]

Feel free to imporve.