Angular routing match url with a specific parameter

Question

I'm working on implementing an angular app inside of the WordPress admin dashboard.

I'm currently trying to implement routes and I'd like to know if there's a way to match routes with a specific parameter. For example, my plugin's base URL in WordPress is:

http://localhost/wp/wp-admin/admin.php?page=angular_plugin

This matches with the root path of angular routing. However, if I want to implement more pages, I can't use a different path since WordPress is not going to recognize it and will return an error. So to avoid WordPress messing around with my routes, I need to use the plugin's base URL and play with the parameters to indicate which route I'm trying to load.

For example, to load the dashboard route, it would have to be something like:

http://localhost/wp/wp-admin/admin.php?page=angular_plugin&route=dashboard

Is there a way to declare routes like this in Angular?

Answer 1

You can give hash location strategy a try. Then the url would be something like http://localhost/wp/wp-admin/admin.php?page=angular_plugin/#/dashboard this way wordpress won't bother because it is just a thing to be handled in javascript.

Angular's default location strategy is PathLocationStrategy, so you need to enable HashLocationStrategy which is trivial to do, just make sure you have useHash set as true in your routing module ts file like below

@NgModule({
  imports: [ RouterModule.forRoot(routes, {useHash: true }) ],
  exports: [ RouterModule ]
})

Answer 2

If you want to use angular on wordpress admin,you can just point every incoming request to /wp/wp-admin/admin.php/foo/bar to /wp/wp-admin/admin.php with htaccess