Ionic DeepLinker / Angular HTML5Mode / URLs without #

I’m building a PWA in Ionic 2. DeepLinker is working well (no Tabs). However, the URLs have the ‘#’ in them.

I see lots of ways to disable them on modern browsers in Angular 1, but what’s the best way to build URLs without # in Ionic 2 / Angular 2?

Thanks

Put this in your app.module:

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

...

@NgModule({
...
providers: [
{
   provide: LocationStrategy,
   useClass: PathLocationStrategy
},
...
4 Likes

THANK YOU VERY MUCH!

This worked!

Here’s my code:

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

...

@NgModule({

...

providers: [
    Storage,
    Events,
    GoogleAnalytics,
    CookieService,
    { provide: LocationStrategy, useClass: PathLocationStrategy }
 ]

@tleguijt & @morrisonbrett

I’m in a similar situation, but I cannot seem to get this path-based location strategy to work.
Every time I try to navigate to a page I only see: Cannot GET /test
I’ve tried implementing using the method you describe, and also the methods discussed here: https://github.com/driftyco/ionic/issues/5479#issuecomment-185267794

I can only get hash based navigation working alongside the deeplinker, but not path based.

Are there any additional steps you are taking that I may be overlooking?

Thanks

You would need to rewrite (not redirect) in your web server all the routes for your application to load /, and therefore the Ionic’s index.html. Otherwise your web server will try to load the index file at directory /test, which doesn’t exist.

I too am having the same issue. I should not have to rewrite my routes from the server. If I refresh my page running the local server it should work the same way it does when using the hash location strategy.

http://localhost:8100/projects for instance should not get the error:

Cannot GET /projects

It should just go to the projects page. Or else the deep linker is useless.

1 Like

A much easier, and really the correct way to set this is in the ionic config

    IonicModule.forRoot(MyApp, {
        locationStrategy: 'path'
    })

I’ll make sure this gets added to the docs in a clear manner.

6 Likes

Thanks @mhartington, with this setup should it also work in simple ionic serve or does it require rewrite on the hosting server also?

locationStrategy: 'hash' works as expected when used in conjunction with DeepLinkerConfig e.g.

export const deepLinkConfig: DeepLinkConfig = {
  links: [
    { component: TabsPage, name: 'Home Page', segment: '' },
    { component: CartPage, name: 'Cart Page', segment: 'cart' },
    { component: TestPage, name: 'Test Page', segment: 'test' }
  ]
};

...

IonicModule.forRoot(MyApp, { locationStrategy: 'hash' }, deepLinkConfig),

...

But I cannot get the same result using ‘path’.
Is this the recommended setup, or am I missing something completely?

1 Like

What part does not work? Could you specify a bit?

I am using PathLocationStrategy because I am using ng2-adal which wraps the adal.js library. That library uses a hash to separate the token from the main URL, so the hash path strategy will not work in Ionic and adal. Everything works correctly except when I try to navigate using the URL or refresh a page with a full path; i.e. http://localhost:8100/project-summary

I get an error: Cannot GET /project-summary

2 Likes

I’m still getting this even though my <base href="/> is at the top of index.html right under <head>

I’m seeing the same path strategy issue with deep linking. I just filed an issue - https://github.com/driftyco/ionic/issues/10565. Hopefully this clarifies what I’m seeing.

BTW, what is the purpose of the name property in the link object.

links: [
  { component: HomePage, name: 'Home', segment: 'home' },
  { component: DetailPage, name: 'Detail', segment: 'detail/:userId' }
]

It seems I can remove the property with no ill effect. Is it used somewhere?

I was using the path locationStrategy under the assumption that it would work within Ionic serve. I did, however, enable the path based routing by hosting the files locally, and on our remote apache server, and using the following .htaccess confg:

<IfModule mod_rewrite.c>
Options Indexes FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

I’m still not 100% sure this is the recommended method though.

Note: We are using Ionic as the backbone of an website MVP, which will later be refined for an app launch, hence the focus on the path locationStrategy

1 Like

it doesn’t work when we refresh

Has anyone been able to get the path strategy working with refresh?

Same problem here.

And I need the locationStrategy path for Slack Connect redirect URI :

https://mydomain.com/slack?code=123456

With locationStrategy hash : https://mydomain.com/#/slack?code=123456 it remove the URL parameter and reload the page and I loose the code

This thread has kinda gone stale but did anyone manage to work out the refresh issue? Does the htaccess config work?

If you use node.js server with express you can add route that corrects your request URL like this:

app.get('*', (req, res, next) => {
  if ((req.url.indexOf('#') > -1) ||
      ((req.url.lastIndexOf('.') === -1) ||
      (req.url.indexOf('/', req.url.lastIndexOf('.')) > -1))) {
    req.url = `/#${req.url}`;
  }
  next();
});

It is not the best way, but it solves the problem)

This is a problem with Ionic and they decided to not fix it in this release. Here you can see an issue opened in Github and the comment of an Ionic contribuitor.

Knowing this wont be fixed in v3, would it work for you all to use ? and GET queryparameters to mimic deeplinking instead of hash? Possibly works better with SEO and redirection

Something like

Http://whatever/?page=mypage&id=100

Or

Http://whatever/?path=/ggggg/hhhh/6777