stuartwk / ng-wp-theme

Minimal Angular Theme for WordPress

NG-WP

A minimal WordPress theme that runs off of an Angular 4 app. Built for the tutorial http://doppiaeast.com/post/angular-2-wordpress-theme-setup/.

Usage

First, run npm install.

Inside the environments folder, you will find two files -- one for production and one for development. Open each up and set wpBase to whatever you dev and live sites are.

For development, simply run ng serve, in the terminal inside the project folder, and the CLI will do the rest. The content of the site is managed from the WordPress admin panel.

To push the project to the server, run ng build --prod --deploy-url="/wp-content/themes/{THEME_DIRECTORY_NAME}/dist/" from your command line. This will output a dist folder. Upload index.php, styles.css, functions.php, and the dist folder to your theme directory on your server. You should be good to go!

This project will play nice with the Angular CLI.

Contributions

Pull requests always welcome

ng-wp-theme's Issues

WP Setup

Hello stuartkuentzel,

I was not sure where to post, so I'm asking here.

On tutorial there's no much informations about WordPress setup part, it is just assumed WP have to be installed at start of the tutorial and that we can use WP from another distant server.

Any details on this ?

"no post found" in production

Hi,
Thanks for the wonderful stuff.

I have downloaded the zip file and edit the base url and built it. Then i pasted the dist folder in my WordPress localhost. I had to edit all js and css compiled files paths' in dist/index.html. Then i activated the theme in WordPress dashboard, when i go to the website it shows "no post found". But in my Angular localhost:4200 i can see the posts!

Please help me to fix this.

Hussain.

relative URLs

Hi,

Great project and i got my angular 4 theme working great! But I i cant seem to add relative URL's to my images in wordpress, I dislike hardcoding the img src tags because i got a nice workflow going between dev and production environments.

This doesn't work:

<img src="assets/img/global/logo.png" />
this works:

<img src="/wp/wp-content/themes/angular2/dist/assets/img/global.png"/>
Is there a way to make wordpress use relative URL's instead of hard coding it?

Angular 4 compatbility?

Angular 4 soon out

Local workspace file angular.json could not be found

Trying to create the post class with the following command:

ng g class /posts/post

Outputs the following error:

Error: Local workspace file ('angular.json') could not be found.
    at WorkspaceLoader._getProjectWorkspaceFilePath (/usr/local/lib/node_modules/@angular/cli/models/workspace-loader.js:44:19)
    at WorkspaceLoader.loadWorkspace (/usr/local/lib/node_modules/@angular/cli/models/workspace-loader.js:31:21)
    at GenerateCommand._loadWorkspace (/usr/local/lib/node_modules/@angular/cli/models/schematic-command.js:292:29)
    at GenerateCommand.<anonymous> (/usr/local/lib/node_modules/@angular/cli/models/schematic-command.js:57:18)
    at Generator.next (<anonymous>)
    at /usr/local/lib/node_modules/@angular/cli/models/schematic-command.js:14:71
    at new Promise (<anonymous>)
    at __awaiter (/usr/local/lib/node_modules/@angular/cli/models/schematic-command.js:10:12)
    at GenerateCommand.initialize (/usr/local/lib/node_modules/@angular/cli/models/schematic-command.js:56:16)
    at GenerateCommand.<anonymous> (/usr/local/lib/node_modules/@angular/cli/commands/generate.js:41:40)

All steps followed, npm installed and the project compiles but just doesn't work with the command.

questions about production server

Hi i´m using uniserver as the web server so I create a vhos named linda2.com

so my environment.prod.ts is:

export const environment = {
  production: true,
  wpBase: '//linda2.com/wp-json/wp/v2/'
}; 

and run the build command as
ng build --prod --base-href /wp-content/themes/wpng2/dist/

and everything works fine, but my home url on the browser change to http://linda2.com/wp-content/themes/wpng2/dist/ and I and want to ask, if its possible to make it work having the home url as: http://linda2.com

REST Full is it posible?

Please tell me how to implement POST and UPDATE. I get a 401 error. I can not quite understand how to fix this. How to send a login and password, or a token to the header. Thank you.

'router-outlet' is not a known element

Following your tutorial to setup the project, I get the following error:

'router-outlet' is not a known element:

1. If 'router-outlet' is an Angular component, then verify that it is part of this module.

update post list on when new post is published

Is there any way to change the code to do this?, i'm an angular beginner

Angular 5/6 update

Will you update this project for ng 5/6 releases?

Question about dev status

Hi, I just would like to know: is this a one-shot demo or do you plan to work on this on a longer time period? Are you planning on adding features / supporting future wordpress versions / developing on it?