PathLocationStrategy with DeepLinker

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 I would like to see

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

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

should work.

Thanks! That is definitely on the right path. It is obvious in the source code that it is the right parameter -

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 -

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.

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

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

I ended up getting it to work -

Doesn’t work anymore?

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.

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

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

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.

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!


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: