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?

talhature · Accepted Answer · 2019-04-29 16:43:31Z

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 ]
})

answered Apr 29, 2019 at 16:43

talhature

2,1851 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jakub Rusinowicz · Accepted Answer · 2019-11-20 09:24:19Z

0

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

answered Nov 20, 2019 at 9:24

Jakub Rusinowicz

3941 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular routing match url with a specific parameter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related