Code Monkey home page Code Monkey logo

angular-xo-material's Introduction

Xo for Angular WordPress Material Theme

The theme used for the Xo for Angular documentation site.

Xo for Angular home page screenshot

Use ng serve to rapidly develop locally, taking advantage of file watching to compile and reload the development site. Use ng build to create a distribution and let Xo serve the site through the main domain without any additional server setup.

Once the theme has been built using ng build or ng build --prod the source folders are no longer necessary. A theme developer may opt to publish a theme built with Xo that does not include the source or build tools.

Setup

This theme comes compiled for production so all assets and application code are the minimal (fastest) size.

  1. Download the latest Xo for Angular from the releases page, upload, and activate within WordPress.
  2. Download the latest Xo Material theme from the releases page, upload, and activate within WordPress.
  3. Create menus, pages, posts, and other content and let Xo do the heavy lifting.

This theme also makes use of ACF Pro, a fantastic plugin for adding configurable fields to various items within WordPress such as pages, posts, menus, etc. Without ACF installed only the default template is usable as it only makes use of the wordpress default editor.

Getting Started

  1. Rebuild the Xo Templates Cache. Depending on the order in which the theme and plugin were installed/activated or if template changes have occured it will be necessary to rebuild the cache of templates within WordPress

    • From the Xo -> Tools main tab click the "Rebuild Templates Cache" button.
    • This is not necessary if the Reader or Cache are disabled from the Xo -> General Options -> Templates tab.
  2. Set the Redirect Mode on the Xo -> General Options -> Index to Live and Save.

    • Check that the Src Index is set as /src/index.html.
    • Lastly check that the Dist Index is set as /dist/index.html.
  3. Using the Live Redirect Mode allows WordPress and other plugins to inject code and content in your theme. Options to include this and the App Config are found under the Live Index section on the Xo -> General Settings -> Index tab.

    • Check that that the App Config is enabled, this is necessary to instruct the Angular App about the location of the Xo API and other WordPress or theme settings.
    • Optionally enable Header (wp_head) and Footer (wp_footer) to be included in the index. This theme does not use wp_footer and if not required by other plugins should be disabled to save on performance.

Development

This theme additionally comes with all source files and configuration info necessary to develop, modify, and debug the Angular App running within the theme.

Local Server

Just as your Angular App can run with ng serve your WordPress will also need to run on a server. I recommend XAMPP for beginners, though the below should work for any apache server.

XAMPP on Windows

  1. Download your entire WordPress installation and place the files at: C:\Projects\AngularXoMat. If the path does not exist, create the Projects folder first and then AngularXoMat inside. This can be a path anywhere on your machine, inside should be the index.php file and wp-content folder for example. Make sure if you have an .htaccess file that it has been copied as well, sometimes this file is hidden depending on your view settings.

  2. Add a virtual DNS entry for angularxo.local. Otherwise the site must work at the root or sub folder of localhost which can be messy when working on multiple projects. This entry will tell the browser that the data for this domain should come a server on our local machine.

    1. Open notepad as Administrator.
    2. File -> Open -> C:\windows\system32\drivers\etc\hosts.
    3. On a new line at the bottom add 127.0.0.1 angularxo.local.
    4. Save.
  3. Add a virtual host entry in httpd.conf. This is necessary to point angularxo.local to our local WordPress directory at C:\Projects\AngularXoMat.

    1. Open notepad or your editor of choice.
    2. File -> Open -> C:\xampp\apache\conf\httpd.conf.
    3. On a new line at the bottom add the below
    <VirtualHost *:80>
      ServerName angularxo.local
      DocumentRoot "C:\Projects\AngularXoMat"    
      <Directory "C:\Projects\AngularXoMat">
        Options Indexes FollowSymLinks MultiViews
        AllowOverride all
        Require all granted
      </Directory>
    </VirtualHost>
    
    1. Save and restart apache.
  4. Visit http://angularxo.local in your browser. The http:// protocol portion is important as browsers such as Chrome may attempt to search for the unknown domain. Typing the protocol portion forces the browser to load the domain propertly.

Angular CLI

It is possible to use the Angular CLI to build, modify, and add new modules and components. This theme comes with several shortcuts for running the ng serve local development server and ng build with the right arguments that are compatible with WordPress and Xo.

  1. First open a command prompt.

Building with ng build

The easiest method as it makes use of your previously configured server to access your WordPress as normally through http://angularxo.local. This can be accomplished using one of the following commands:

  • npm run build or ng build --deploy-url /wp-content/themes/angular-xo-material/dist/

    • Run a build to the dist folder at /wp-content/themes/angular-xo-material/dist/. This is important as unlike a typical Angular App where the files in the /dist/ folder are deployed to the root of the server these files are actually nested within the theme folder in WordPress.
    • The Angular App will be in debug mode which may emit more verbose information on the console, additional resource map files, and assets and application files will not be minified.
  • npm run deploy or ng build --prod --deploy-url /wp-content/themes/angular-xo-material/dist/

    • The same as npm run deploy except assets and application code are minified with the Angular App configured for production.
  • npm run watch or ng build --watch --deploy-url /wp-content/themes/angular-xo-material/dist/

    • The same as npm run deploy except once the initial compilation is complete the script will be placed into a watch mode for file changes that may trigger recompliation. A refresh of the page is required to see the updated changes.

Building with ng serve

Running with ng serve we need a way to reference our local angularxo.local server from within the live server typically running at localhost:4200. This is made possible by adding an additional build configuration invoked by running the below command:

  • npm run serve or ng serve --configuration local
    • Run ng serve and include the App Config specified in /src/environments/environment.local.ts within the theme folder.

If you run the local WordPress server from a host other than angularxo.local it is required that this be updated in the local environment file at /src/environments/environment.local.ts within the theme folder.

This is necessary as Xo within WordPress will not have the opportunity to parse the index file and add this configuration dynamically using the Live Redirect Mode. Additionally it is possible to specify this configuration manually for the production environment file and use the faster Offline Redirect Mode.

All notable changes to this project.

angular-xo-material's People

Contributors

jnz31 avatar warriorrocker avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

angular-xo-material's Issues

Blank page.

The theme loads fine. I can se 'XO' in console. No errors. But it loads a blank page. Is that normal? I can change the angular code to display "hello world" or anything. But how does the theme work? How can i load content from my Wordpress site? How can i load "content" , "home" or "default" page?

XoResolver Error Handling and Routing - Unable to locate term or post

I'm using the xo-api in a custom theme.

Everything works fine, when I call existing taxonomies or cpt's.

e.g. /taxomomy/term/post or
/taxomomy/term

In this case:

/taxomomy/term/post-not-existing or
/taxomomy/term-not-existing

an js error occurs

main.c8b206c087083dd18b04.js:1 ERROR Error: Uncaught (in promise): [object Undefined]
    at R (polyfills.740947e94c0b9ca6fd5d.js:1)
    at R (polyfills.740947e94c0b9ca6fd5d.js:1)
    at polyfills.740947e94c0b9ca6fd5d.js:1
    at e.invokeTask (polyfills.740947e94c0b9ca6fd5d.js:1)
    at Object.onInvokeTask (main.c8b206c087083dd18b04.js:1)
    at e.invokeTask (polyfills.740947e94c0b9ca6fd5d.js:1)
    at t.runTask (polyfills.740947e94c0b9ca6fd5d.js:1)
    at g (polyfills.740947e94c0b9ca6fd5d.js:1)
    at t.invokeTask [as invoke] (polyfills.740947e94c0b9ca6fd5d.js:1)
    at _ (polyfills.740947e94c0b9ca6fd5d.js:1)

The request response of xo-api is correct:

{term: null, success: false, message: "Unable to locate term."}
message: "Unable to locate term."
success: false
term: null
{post: null, success: false, message: "Unable to locate post."}
message: "Unable to locate post."
post: null
success: false

I would expect to be redirected to the 404 page, but a blank page is displayed.
Is there a way to fix this js error and automatically redirect to the 404 page?

404 redirect for missing pages works perfectly.

Angular _router.events.NavigationError returns:
tย {id: 1, url: "/taxonomy/term-not-existing", error: undefined}

WP-Setup:
ACF Pro
CPT e.g. portfolio
Custom Taxonomy e.g portfolio_category

Unable to render index error

Hi,
I try to upload the angular-xo-material theme to wordpress, but I always get the "Unable to render index" error. I did these steps:

  1. I downloaded the theme from your page, and I built it with ng build. After I tried with npm install --> npm build. Effect is the same.
  2. Uploaded to the server via ftp
  3. Theme activation within wp
  4. Set the "Redirect mode" to Live. This is ended with the "unable to render index error".

In an another thread I red that I need Advanced Custom Fields plugin to make theme works. I tried with this, but I got fatal error.

Could you help me?

Some of the theme features are not available out of the box

I am really fond of this plugin, but there are issues I can't figure out with guides and Api documentation:

  1. I have a GET request from main page that knocks to "/xo-api//routes/get" endpoint, but I can't find where it comes from. From the api the only place where this service is used is in the "angular-xo-material/src/app/components/sitemap/sitemap.component.ts", but it never fires. So to fix the double slash in "xo-for-angular" wp plugin folder, I have to go to "wp/wp-content/plugins/xo-for-angular/Includes/Api/Controllers/ConfigController.class.php"(:29) 'apiUrl' => $this->Xo->Services->Options->GetOption('xo_api_endpoint') . '/',
    and remove the trailing slash.
  2. Routes don't work. In Angular routes(app.routing.module), the names of the routes are like this: path: 'xo-material-page-default'. Should I change them or they are intended to be named like this?
  3. When I fix the GET '"/xo-api/routes/get' endpoint - I receive the array of routes, but they don't work. Should I put them as angular routes somehow?
  4. In the "xo-for-angular" wp plugin folder - the route names are like this: 'xo-page-preview-' . $postId, that doesn't work. Should I change names and should I implement routes in Angular manually?
  5. in api docs, when fetching Posts with XoApiPostService there is no getPage method
  6. How to show wp pages content that are made with builder? Their content looks like this: [vc_row]...[/vc_row] but never shows as html.

category links not working

hi

i work on a fresh wordpress install in combination with angularxo plugin (1.1.1) and angular xo theme (0.1.4). i got the urls working, permalink-structure is /blog/%postname% and that works fine. however, the categories do not. i have one category and there is a post inside, but it redirects to the 404 page. the url is /blog/category/some-category and my routes look like so
{"routes":[{"path":"xo-page-preview-3","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"full","data":{"postId":3}},{"path":"xo-post-preview","loadChildren":".\/pages\/posts\/posts.module#XoMaterialPostsPageModule","pathMatch":"prefix","data":{"postPreview":true}},{"path":"xo-attachment-preview","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"prefix","data":{"postPreview":true}},{"path":"xo-blog-preview","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"prefix","data":{"postPreview":true}},{"path":"agb","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"full","data":false},{"path":"datenschutz","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"full","data":false},{"path":"impressum","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"full","data":false},{"path":"kontakt","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"full","data":false},{"path":"leitung","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"full","data":false},{"path":"seminare","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"full","data":false},{"path":"institut","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"full","data":false},{"path":"blog","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"full","data":false},{"path":"","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"full","data":false},{"path":"blog\/hallo-welt","loadChildren":".\/pages\/posts\/posts.module#XoMaterialPostsPageModule","pathMatch":"full","data":false},{"path":"blog","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"prefix","data":{"postType":"blog"}},{"path":"**","loadChildren":".\/pages\/default\/default.module#XoMaterialDefaultPageModule","pathMatch":"full","data":{"url":"\/error-404"}}],"success":true,"message":"Successfully retrieved routes."}

i dont see any category routes in there. i resaved the permalinks and i rebuilt the template cache, but it didn't help. any clue on this?

now that i looked a little bit around i see that you register a cpt blog and i think that my settings may clash. but i changed the structure to /blogz/%postname% but the result is the same.
i know for a fact, that you should register your custom taxonomies before you register custom post types (if they belong together), but i dont think that that is the issue here, since angular takes over the routing.
but why do you register that cpt in the first place? just for testing/showing, that this works?

btw. you should change the rewrite parameters of register_post_type call to
'rewrite' => array( 'slug' => 'blog/%blog_category%', 'with_front' => false, )

so the custom base will not get added to your slug. before that i had a 404 since the url was /blogz/blog/post-name, with my setting it works fine (tested).

and i was wondering about the fact, that you disable gutenberg on blog posts. can you tell me, why you do that? just wanted to know, why you do that. and how would you disable that behaviour?

thanks

ERROR Error: Uncaught (in promise): [object Undefined]

When i try to load the page with this theme, the page remains blank and i get this error in console

ERROR Error: Uncaught (in promise): [object Undefined] at resolvePromise (zone.js:831) at resolvePromise (zone.js:788) at zone.js:892 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:17290) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at drainMicroTaskQueue (zone.js:601) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502) at invokeTask (zone.js:1744)

Is there a way to override route to show angular component instead of wp page contents?

Lets say I have a wp page with route /about and I want angular to serve its own component that lives inside /about route, how can I achieve that? All other wp pages should be fetched to angular with the Plugin.
Tried adding route to Xo lazy loaded routes, but it still fetches wp page.
Created angular component <test-component></test-component> and added this tag to wp page contents, but wp strips unknown tags.

How to use taxQuery?

Hi, can you give an example of how to use the taxQuery param?
/xo-api/posts/filter?taxQuery=

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.