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