Angular and Joomla Routing

[Didrik]

Hey All,

I'm trying to get Angular 6 and Joomla to work together. It's been working well with the angular app inside a module. But now we have a requirement to change the Angular hashrouting system to regular routing.

Example:

The old url:
http://domain.com/tire#/regnr?regnr=abc123&type=rim

The new url need to be:
http://domain.com/tire/regnr?regnr=abc123&type=rim

Currently Joomla doesn't care about what comes after the hash sign. When changing the angular setting for hashrouting, Joomla gives error 404, page not found, since it's trying to look up the regnr directory/file.

I've tried poking around in the .htaccess file but there doesn't seem to exist a solution which resonates well with Joomla. I need some way to tell Joomla to ignore everything that comes after /tire/.. simliar to how you would do in Node.js:

Code: Select all

// Handle Angular routing, return all requests to Angular app
app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

How would be the best way to solve this? Help is very much appreciated!

[fotisevangelou]

That's because Apache (or whatever your webserver is) attempts to pass the entire URL to Joomla's index.php for parsing. You can't easily mix the two. The trick to remove the # (or #! in other routing libs) is to tell the webserver to route paths to index.html but you can't do that when routes are already passed to index.php (as required by Joomla). You could possibly add an exception if "tire" is a subfolder for which you can set different routing on the webserver.

Here's an example in Nginx: https://gist.github.com/fevangelou/09d58cb8e2b3b2c4a00a