Linking to a deep link fails when used with "path" URL strategy

[bholben]

Ionic version: (check one with "x")
[ ] 1.x
[X] 2.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When in development with ionic serve and using the default hash URL strategy, I can configure a segment like this segment: 'product/:productId'. I can successfully navigate to this page and the URL looks like this...http://localhost:8100/#/product/12876. When I paste the URL into a new browser tab, it comes up again. BTW, beautiful job. I'm so stoked about the simplicity of this "router".

When I change the hash strategy to { locationStrategy: 'path' } and set <base href = '/'> in my index.html file, everything works great when navigating in the app. However, I can no longer reach the page when I paste the http://localhost:8100/product/12876 URL into another browser tab. I'm getting a 404.

I have not tested this outside my localhost environment.

Expected behavior:
Deep linking should work when using the path locationStrategy.

[numerized]

Same for me =>

This works with HashLocationStrategy but not with PathLocationStrategy.

Location,` {provide: LocationStrategy, useClass: HashLocationStrategy}, {provide: APP_BASE_HREF, useValue : '/' }

And yes Same :

BTW, beautiful job. I'm so stoked about the simplicity of this "router".

[johnhny]

Does your webserver rewrite "subdirectories" (like "/product") to index.html?

Make sure it does, the URLs have to be rewritten... I guess this is a precondition to get PathLocationStrategy-routing without the Hash (example.com/#/product) working... Otherwise the webserver is looking for a subdirectory "product" (therefore 404) and the ionic logic won't ever be called in that case... Or am I missing something?

e.g. .htaccess Apache:

<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 got it working that way, see also https://forum.ionicframework.com/t/how-to-use-deeplinker-in-browser/75787/7)
Please correct me if I am wrong.

Arno

[numerized]

Yes that's what I thought too but didn't have time to experiment this option.
Thanks a lot Arno

[jgw96]

Thanks for opening an issue, we will look into this.

[MikeLallemont]

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 together. 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

[philliphartin]

@johnhny Thanks for sharing, that resolved it for me. Just to note for others, this does not resolve the issue when running in Ionic serve, but when serving the files via apache, i.e. when hosting on a server, or locally.

[johnhny]

I don't think this is a bug, but it would be great, if this "issue" would be pointed out in the docs as it isn't obvious, I guess.

I'd suggest something like:

• If you set "locationStrategy" to "path" (removes hashbangs when using Deeplinking), you have to make sure that your webserver rewrites URL's to "index.html".
• In apache this can be achieved using this ".htaccess" file configuration...
• If you run your app locally (ionic serve), locationStrategy "path" is not working (currently).

[scottsword]

Is there a way that you can simply enable URL-based routing for local dev? I found this https://github.com/driftyco/ionic-plugin-deeplinks but installing and configuring a plugin seems like overkill just to prevent live reload from redirecting back to the root page every edit.

[yelhouti]

I Think that configuration of the redirect can be done in @app-scripts/dist/dev-server/http-server.js when configuring the express server.
Edit:
I managed to do it but adding app.all('/*', serveIndex); a the end of this function:

function createHttpServer(config) {
    var app = express();
    app.set('serveConfig', config);
    app.listen(config.httpPort, config.host, function () {
        logger_1.Logger.debug("listening on " + config.httpPort);
    });
    app.get('/', serveIndex);
    app.use('/', express.static(config.wwwDir));
    app.use("/" + serve_config_1.LOGGER_DIR, express.static(path.join(__dirname, '..', '..', 'bin'), { maxAge: 31536000 }));
    // Lab routes
    app.use(serve_config_1.IONIC_LAB_URL + '/static', express.static(path.join(__dirname, '..', '..', 'lab', 'static')));
    app.get(serve_config_1.IONIC_LAB_URL, lab_1.LabAppView);
    app.get(serve_config_1.IONIC_LAB_URL + '/api/v1/cordova', lab_1.ApiCordovaProject);
    app.get('/cordova.js', servePlatformResource, serveMockCordovaJS);
    app.get('/cordova_plugins.js', servePlatformResource);
    app.get('/plugins/*', servePlatformResource);
    if (config.useProxy) {
        setupProxies(app);
    }
    app.all('/*', serveIndex);
    return app;
}

I'm sure that, guys from app script can cookup something to check if there is a base in the head of the HTML and add this line programatically, or even simpler add a config for it.
Maybe someone can check how Angular team does it when you use the router and ng serve (if they do)

[philliphartin]

@yelhouti - Thanks for sharing. Seems to work perfectly. It's a pity we have to edit a dist file from the node_modules to get this to work. Any ideas on how we could over-ride using a config as you mentioned?

[yelhouti]

@pjhartin for that you will need to talk to app-script guys, the simplest way is to add a config variable (ex: pathLocationStrategy)
and in the code:

if(config.pathLocationStrategie){
    app.all('/*', serveIndex);
}

you can even write a pull request for that

[bartcich]

@yelhouti This approach unfortunately does not work when you have proxies configured, because setupProxies function uses promise, so it's executed after app.all('/*', serveIndex);.

As a quick fix I made:

...
app.get('/plugins/*', servePlatformResource);

    function serveLocalationStrategyIndex () {
        app.all('/*', serveIndex);
    }
    if (config.useProxy) {
        setupProxies(app).then(serveLocalationStrategyIndex);
    } else {
        serveLocalationStrategyIndex();
    }

    return app;

And below in setupProxies I added return in line:

return ionic_project_1.getProjectJson().then(function (projectConfig) {

But it probably needs better approach.

[yelhouti]

Thank for the info, I was just trying to provide a quick fix for those in need and not confortable digging too deep in the code, of course your solution is much more complete and if you have time I suggesting discussing a fix in ionic-app-script git project and making a pull request for that. thanks in advance

[martinlombana]

Any news on this?

I can not get it working either. When you reload the page it doesn't work.

[FlorianHuebner]

Still seems to be a problem. Can we get update on this one?

[kensodemann]

This issue will not be resolved in v3.

The next major release of Ionic and Ionic for Angular will change navigation such that we use the Angular router and the Angular CLI which should fix this issue.

If this is still an issue at that time, please log a new issue. I am going to close this one as something that will not be fixed in the current major release.

[FlorianHuebner]

Thanks for the update!

[viveksinha9]

So, if this is not fixed, what supposed to be done in case of tabs with path location strategy? Is there any workaround? Or should use hash strategy? Please confirm.

[santiDotIO]

Any update when this fix will be released?

[danielehrhardt]

Yes an answer would be great

[artuska]

Hi, i'm on a project using Cordova and facing the same issue :(

[rsanchez]

@kensodemann Would it be possible to leave this issue open until the fix is released? This would help me (and other users) have better visibility as to when this issue truly resolved. Thanks for your help in advance!

[lorand93]

When will this release be live ? This is a major issue

[TomWhiteOmni]

Just to be clear, we are all now talking about Ionic 3, aren't we?
I've got this exact problem too (on Ionic 3).
It's a critical bug due to our Oauth provider not handling hash based URLs - because it uses the hash for its own purposes.

[erperejildo]

@kensodemann any idea about when is going to be the new version released?

[kensodemann]

@erperejildo - the v4 alpha is getting close. After that it is all a question of how well things go with that.

[abdulwahid24]

Do we have any possible fix for ionic 3 as I desperately need to fix this issue?

[abdulwahid24]

I am building a PWA app along with Android and iOs build and I integrated Google login but google Oauth credentials doesn't support redirect URI along with #. Currently, we are using ionic serve but not sure how will it be in web and mobile app. Please do let me know if someone fixed it.

[erperejildo]

@abdulwahid24 I think you could use that v4 alpha version, right @kensodemann?
If they are already working on this on v4 I think there is no reason to support previous versions

[abdulwahid24]

@erperejildo Please so let me know how can I upgrade my existing ionic3 app with ionic 4 alpha release. Thanks

[dfa1234]

@kensodemann
I think that it's a major issue because of SEO.
I'm very concerned that a hashbangs (using hashlocation strategy) will broke any attempt to be scrapped by robots.
Using a alpha release is not a option.

[phingers]

I have the same issue with authentication in mongo stitch app as @abdulwahid24 is stating. How do we get past it meanwhile?

[erperejildo]

@abdulwahid24 I don't recommend you any alpha version. Tried (accidentally) the other day and I got some issues.

But if you want to try with npm outdated and npm update should be enough

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.