CODEWITHSUNDEEP
wordpressangular
R. Campos
R. Campos

Reputation: 957

Trying to embed angular app in wordpress dashboard: Is it possible to create a custom admin page without the add_menu_page function?

I'm trying to embed an Angular app into the dashboard of wordpress. Initially, I created a custom menu in the dashboard like the following:

add_menu_page( 'My App', 'My App', 'manage_options', 'my_app', 'showMyApp', null, 2 );

The new menu entry in the left menu appears, and when I click on the menu entry I'm redirected to

/wp-admin/admin.php?page=my_app

The showMyApp method, loads all needed stuf (the angular framework, and so on), and the main page of the angular app is displayed. But immediately and as soon as the angular app is loaded, things begin be strange because of the angular routing.

This angular app is a little app with two components: a master page and a detail page, defined as follows in the routing module:

const routes: Routes = [
    {path: 'main-list', component: MainListComponent},
    {path: 'detail', component: DetailComponent},
];

What happens here is that as soon as the angular app is loaded, the url in the browser that was

/wp-admin/admin.php?page=my_app

is redirected to:

/wp-admin/admin.php/main-list?page=my_app

That would be correct, for a normal angular app, but not for an embeeded app in wordpress.

Because of that, I'm looking for a way to have a custom page in the dashboard, like for example:

/wp-admin/edit.php

or 

/wp-admin/edit-comments.php

but in my case, something like "/wp-admin/my_app.php" and render here my angular app. I suppose that in that way, the url segments for the navigation of the angular app will be appendend to the url like

/wp-admin/my_app.php/main-list

And maybe that does the trick.

Or if you know another way to embed an angular app in the dashboard of wordpress, any help would be appreciated.

Regards.

Upvotes: 1

Views: 2800

Answers (3)

Guilherme Cercal
Guilherme Cercal

Reputation: 106

Maybe it's a late answer, but something very interesting that you can implement is creating a Web Components from an Angular App.

you can find a good starter point in this tutorial:

https://buddy.works/tutorials/building-web-components-with-angular

and you can use routes to render different components:

https://medium.com/@timon.grassl/how-to-use-routing-in-angular-web-components-c6a76449cdb

Upvotes: 1

R. Campos
R. Campos

Reputation: 957

Answering to SilverColt (apologizes for the very late answer). In my wordpress plugin, I do the following:

Adding the new menu option to the wp dashboard:

add_action( 'admin_menu', function () {
    add_menu_page( 'MyApp', 'MyApp', 'manage_options', 'mi_app', 'showMyApp', null, 2 );
} );

And the showMyApp PHP method does the following:

function showMyApp() {
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }


    wp_enqueue_script( 'r_my_app_runtime', "/wp-content/plugins/r_my_app/MyApp/dist/runtime.js", null, true );
    wp_enqueue_script( 'r_my_app_polyfills', "/wp-content/plugins/r_my_app/MyApp/dist/polyfills.js", null, true );

    wp_enqueue_script( 'r_my_app_vendor', "/wp-content/plugins/r_my_app/MyApp/dist/vendor.js", null, true );
    wp_enqueue_script( 'r_my_app_main', "/wp-content/plugins/r_my_app/MyApp/dist/main.js", null, true );

    wp_enqueue_style( 'r_my_app_angular_material_fonts', 'https://fonts.googleapis.com/css?family=Roboto:300,400,500' );
    wp_enqueue_style( 'r_my_app_styles', "/wp-content/plugins/r_my_app/MyApp/dist/styles.css" );
    //Bootstrap
    wp_enqueue_style( 'r_my_app_bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' );
    wp_enqueue_script( 'r_my_app_popper', "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js", null, true );
    //End bootstrap

    echo ' <app-root></app-root> ';

}

As you see, the showMyApp method loads the javascript corresponding to the angular app, and some other stuff, like css and so on. Then this app is rendered inside the main content of the wp dashboard, and you have a SPA living inside the wp dashboard.

The same can be achieved if you want to have a SPA in the frontend. But in this case, I do it with a custom template, that loads the stuff, and I use this custom template for an empty page in the frontend, where the SPA will be loaded.

Hope it helps!

Upvotes: 1

R. Campos
R. Campos

Reputation: 957

I managed to solve it myself.

Important is:

1.- the in the header for the angular app, has to be:

<base href="/wp-admin/admin.php">

2.- My routing module in the angular app, remains so:

const routes: Routes = [
    {path: 'main-list', component: MainListComponent},
    {path: 'detail', component: DetailComponent},
     {path: '**', redirectTo: '/main-list?page=my_app', pathMatch: 'full'}
];

And finally, when navigating or embedding links in the html, the query parameter "page=my_app" has to be always present in the url. Because of that I embed the links like that:

<a routerLink="/main-list" [queryParams]="{page:'my_app'}">Main List</a>

And now the routing is working well, and the angular app (I'm using angular 5 at this time) can have as many views/components as needed. The angular app lives inside the custom admin page of wordpress.

Regards!

Upvotes: 0

Related Questions