Angular CLI as a WordPress theme

by

To add your Angular project as a theme is easy. Therefore I will here summarize the doppiaeast article of how simple it actually is.

The first step you are to add index.php and function.php and style.css to your Angular project src folder to get wordpress to know the theme. These files must then be uploaded manually in the theme you create.

index.php
<?php require get_template_directory()."/dist/index.html"; ?>

function.php
<?php

?>

style.css

/*
Theme Name: TopwebTema
Author: Peter Hedman
Author URI: https://topweb.se
*/

Build your project
ng build --prod --deploy-url="/wp-content/themes/{THEME_DIRECTORY_NAME_ON_SERVER}/dist/

{THEME_DIRECTORY_NAME_ON_SERVER} I named here to TopwebTema, ie the name of the folder I create for the theme in wordpress.

You can now see that the folder Dist has been created in your project. Upload that folder along with the files we previously created in the folder for your theme, and you’re done!

If angular port 4200 is already in use?
sudo lsof -t -i tcp:4200 | xargs kill -9

Leave a Reply

Your email address will not be published. Required fields are marked *


PageLines