Ionic DeepLinker / Angular HTML5Mode / URLs without #


#1

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


Ionic and html5mode (google search console)
#2

Put this in your app.module:

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

...

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

How to use DeepLinker in browser?
URL routing without hash
#3

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 }
 ]

#4

@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


#5

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.


#6

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.


#7

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.


Remove hashbangs from URL
#8

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?


#9

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


#10

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


#11

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


#12

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?


#13

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


#14

it doesn’t work when we refresh


#15

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


#16

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


#17

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


#18

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)


#19

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.


#20

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