PathLocationStrategy with DeepLinker

Ionic Framework ionic-v3
1

I’m working on building a web app with Ionic 2 and obviously need direct links to many of the pages. I am using the new DeepLinker to enable this, but it uses the old HashLocationStrategy by default. Is there anyway to use the PathLocationStrategy instead? For example, instead of example.com/#/contact I would like to see example.com/contact

2

config.get(‘locationStrategy’) === ‘path’ is in the src.

IonicModule.forRoot(AppComponent, { locationStrategy: ‘path’ }, DEEP_LINK_CONFIG)

should work.

3

Thanks! That is definitely on the right path. It is obvious in the source code that it is the right parameter - https://github.com/driftyco/ionic/blob/f87c1fee5e1938be7f8535a68df141af109ea680/src/module.ts#L200

I tried the following with no success:

  imports: [
    IonicModule.forRoot(MyApp, {
       locationStrategy: 'path'
     }, {
    links: [
        { component: ContactPage, name: 'Contact', segment: 'contact' },
        { component: AboutPage, name: 'about', segment: 'about'},
        { component: HomePage, name: 'Home', segment: ''}
    ]
  })
]

When I go to the root, the home page is served, but if I go to /contact I get an error. Am I missing something else? It also seems that the locationStrategy is not documented in the Config documentation - https://ionicframework.com/docs/v2/api/config/Config/

4

Do you have the base href set in the index.html?

I’ll admit that the deeplinker docs need some more attention in this aspect, something I will be working on this week.

5

Yes, I have it set as so in the <head> - <base href="/">

6

whats the error that you actually get? Maybe that will help

7

I ended up getting it to work - http://plnkr.co/edit/syUH0d6SJd2gAjqaPLwr?p=preview

8

Doesn’t work anymore?

9

I just tried doing everything you did and it still doesn’t work. I receive the “Cannot GET /team-member-admin” error when I refresh the URL “http://localhost:8100/team-member-admin” where “team-member-admin” is my segment name for the TeamMemberAdmin component.

I have PathLocationStrategy set and base ref set to “/” or in this case to your script write. Neither work for me.

10

Give us some real code, it works for me, not as I expected, but no errors.

11

What exactly do you mean “it works for me, not as expected?”

12

I was trying to make a global header working, so it was a single PageComponent, which checks the DeepLinker and loads the content from other component dynamically. So in my case it was:
links: [ { component: PageComponent, name: 'Contact', segment: 'contact' }, { component: PageComponent, name: 'about', segment: 'about'}, { component: PageComponent, name: 'Home', segment: 'last'} ]

But that didn’t work, the component of the page has some back relation to it’s segment, and when I run this any segment redirects to the last link in links.
That’s what I mean about not as I expected, but when segments contain different components everything works fine, both ways: hash and path.

13

It’s important to note that the path location strategy won’t work as expected when used with ionic serve or anything similar. When developing, I use a hash location strategy, but in production we have a special block in our nginx configuration that makes the path location strategy work.

location ~ ^/(contact|about|home|some-other-page) {
    try_files $uri $uri/ /directory-where-pwa-lives/index.html;
}

Hope that helps!

3 Likes
14

This app-scripts http-server.ts edit works for me in combination with <base href="/" />.

I put in a PR for @ionic/app-scripts 3.2.5: