murhafsousli / ngx-wordpress

Angular WordPress Module ✨

ngx-wordpress's Issues

API Doc link wrong

The "API Documentation" link at the bottom of the Wiki Documentation page (https://github.com/MurhafSousli/ngx-wordpress/wiki) links to ngx-gallery instead. And the stackblitz example link is also broken.

Unit and End tests - Ionic extention ?

Hello and thanks for this project that looks great, I was looking for something simple to communicate with a wordpress installation with apiv2 plugin on it, where there is some projects over github, your one looks sexy.

My questions are :

• Any plan to extend functionalities to do unit and end tests ? (using karma / jasmine / protractor)
• Any plans to provide ionic extention to build apk / ios packages based on web version ? Something similar than https://github.com/shprink/wordpress-hybrid-client finally.

Thanks for the answers.

Angular 7 support

I'm newbee and I'm trying to use your great package with Ionic Conference App (latest).
When I try to add it I got

npm i -S @ngx-wordpress/core
npm WARN @ngx-wordpress/[email protected] requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngx-wordpress/[email protected] requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.

But in app package.json I have

"@angular/common": "7.1.4",
"@angular/core": "7.1.4",

What is wrong? :)

Can't bind to 'wpModel' and 'wpId"

Using the docs to try and pull in a single page by id, getting the following errors.

Can't bind to 'wpModel' since it isn't a known property of 'div'. ("
    <div class="single-post" [ERROR ->][wpModel]="postsEndpoint" [wpId]="10" (wpResponse)="single = $event.data">
Can't bind to 'wpId' since it isn't a known property of 'div'. ("
    <div class="single-post" [wpModel]="postsEndpoint" [ERROR ->][wpId]="10" (wpResponse)="single = $event.data">

Unexpected value 'e' - WordPressModule

When I add the WordPressModule to NgModule imports array, I get the following error in the chrome web console.

Error: Unexpected value 'e' declared by the module 'AppModule'

I used the Ng CLI and just added the module.

Problem include in app.module

Hi, I updated Angular CLI to latest beta version.

I created a empty project, installed package with command: npm install ng2-wp-api --save but when I add this import { WordPressModule } from 'ng2-wp-api/dist'; on my app.module the page freeze.

Here the error:

metadata_resolver.js:227 Uncaught Error: Unexpected value 'e' imported by the module 'AppModule'

My information:
ng --version
angular-cli: 1.0.0-beta.16
node: 6.6.0
os: win32 x64

Do you know if I wrong something? Sorry for my English! Thanks!

Cannot invoke an expression whose type lacks a call signature.

Getting the error on this:
ERROR in C:/Users/Jack/Documents/GitHub/gideonLabs/src/app/posts/post-single/post-single.component.ts (36,5): Cannot invoke an expression whose type lacks a call signature.)

Use InjectionToken

OpaqueToken is deprecated in ng4, use InjectionToken instead in wordpress.module

Allow non standard url prefix

Some developer doesn't use standard wp-json basepath as well as he use different namespaces for custom endpoints.
Do you have any plan of implementing methods for these scenarios?

I contributed to the woocommerce node api client in such a way , I would suggest the same thing here.

Fix AoT error

zone.js:388 Unhandled Promise rejection: (SystemJS) XHR error (404 Not Found) loading http://localhost:8009/ng2-progressbar

I am not able to configure ng-
progressbar, is there any additional configuration to do in system.js?

Angular 5 build warnings - potential errors.

After doing and ng buildcommand I'm getting the following warnings.

activeWarning: Can't resolve all parameters for EndpointService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/endpoint/endpoint.service.d.ts: ([object Object], ?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for ModelService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/model/model.service.d.ts: ([object Object], ?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for ConfigService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/config/config.service.d.ts: (?, ?, ?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for CollectionService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/collection/collection.service.d.ts: ([object Object], ?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for ConfigService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/config/config.service.d.ts: (?, ?, ?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for ConfigService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/config/config.service.d.ts: (?, ?, ?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for ModelService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/model/model.service.d.ts: ([object Object], ?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for ModelService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/model/model.service.d.ts: ([object Object], ?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for CollectionService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/collection/collection.service.d.ts: ([object Object], ?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for CollectionService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/collection/collection.service.d.ts: ([object Object], ?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for EndpointService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/endpoint/endpoint.service.d.ts: ([object Object], ?). This will become an error in Angular v6.x
Warning: Can't resolve all parameters for EndpointService in /Users/oscarviquez/Code/Gamma-7/website/node_modules/ngx-wordpress/service/endpoint/endpoint.service.d.ts: ([object Object], ?). This will become an error in Angular v6.x

Allow getBySlug for posts collection

Could you add a method called getBySlug that would take in a slug: string for getting a post by slug rather than id?

TypeError: t.prototype.get.call(...).timeout is not a function

I updated npm, node and ng2-wp-api on the last versions.

If I try to serve the app I get this error. Issue or my fault?

Thanks as always

Array of posts using WpPost class

Running a mind blank here, but what if I want to have a post listing component that has a list of tags in it as well. How would I run the loop to display those?

For example:
<md-card *ngFor="let post of posts"> <md-card-title-group> <md-card-title> <h4>{{post.title.rendered}}</h4> </md-card-title> <md-card-subtitle> <h5>{{ post.date }}</h5> </md-card-subtitle> <img *ngIf="post.featured_media" md-card-sm-image [src]="post._embedded['wp:featuredmedia'][0].media_details.sizes.medium?.source_url"> </md-card-title-group> <md-card-content> <p [innerHTML]="post.excerpt.rendered"></p> </md-card-content> <md-card-actions> <button md-raised-button [routerLink]="[post.slug]">Read More</button> </md-card-actions> <md-card-footer> <md-chip-list> ------ TAGS HERE ------- </md-chip-list> </md-card-footer> </md-card>

Was going to use a chip here to handle the tags.

Now I get you can use the WpPost Class in the single post. post.tags(), however I get nothing back in a single post where I am using the WpPost Class. Also no author() and categories() return nothing. Using {{ post.author() | json }}, same for categories and tags. No json data.

Thanks.

node_modules/ng2-wp-api/index has no exported member 'WpModel'.

In your model example, I'm importing WpModel but tslint gives me the error above.

Broken in 3.0.0-beta1: link no longer a method

Property 'link' does not exist on type 'WpService'.

E.g. this.services$ = this.wpService.link('https://www.gideonlabs.com/wp-json/wp/v2/pages?per_page=30&parent=65');

This is broken in 3.0.0-beta1

Can you point to more example code?

Hello,

As far as I can tell, this appears to be the only Wordpress API client for Angular4. Thanks for providing this great functionality.

I'm brand new to Angular and TypeScript. Can you provide an example of how to use your library to authenticate with Wordpress and execute a query for a list of posts? I know you have some brief examples in your documentation, but being new to Angular, they're too disconnected for me to piece them together into a working example.

I really appreciate your advice.

Best,
Dave

Open to adding maintainers?

Hello, are you open to having me help maintain the repo and submit PRs? I'm happy to help but don't want to put in the effort if this repo is not actively maintained anymore.

Broken in 3.0.0-beta1: WpQueryArgs no longer exported

"export 'WpQueryArgs' was not found in 'ng2-wp-api'

This seems like a breaking change but isn't listed in the changelog. I also don't see it referenced in the readme.

plugin import

hi,
please help on setting up the plugin
I am trying with angular2-webpack-starter/

npm i  ng2-wp-api -s

in app.module.ts:
import { WORDPRESS_PROVIDERS, WpState } from 'ng2-wp-api';

@Component({
    selector: 'app',
    providers:[WORDPRESS_PROVIDERS],
    ...
})
export class App {
    constructor(wpState: WpState){
        wpState.setBaseUrl("http://yourWordPressSite.com");
    }
}

I always end up with:
Cannot find name 'WpState'.

Token not getting set in the browser local storage

Token is not getting set in browser storage. Hence immediately after auth.signIn..., i get from the browser console

zone.js:3243 GET http://localhost/wp/wp-json/wp/v2/users/me 401 (Unauthorized)

and after doing a

this.auth.signIn(login.name, login.password).subscribe(res => console.log(JSON.stringify(res)));

i get

{"user":null,"loading":false,"loggedIn":false,"error":{"code":"rest_not_logged_in","message":"You are not currently logged in.","data":{"status":401}}}

please i do i get token "set"?

i'm using chrome 65
Thanks

WpService sending request to wrong url i.e appending url twice

Hi,
When i tried to use auth url sending request to http://localhost/manoj/wordcamp/http://localhost/manoj/wordcamp//wp-json/wp/v2/users/me?_envelope this url. It should be http://localhost/manoj/wordcamp//wp-json/wp/v2/users/me?_envelope

Here is my home.ts
`import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { WpService, WpUser } from 'ngx-wordpress';

@component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController,public wpService:WpService) {

}

onLogin(){
this.wpService.auth().basic('username', 'password')
.subscribe((user: WpUser) => {
// ...
});
}

}
Home.html




Home

Ionic Menu Starter

If you get lost, the docs will show you the way.

Login Menu

Toggle Menu

`

and app.module.ts
`import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { WordPressModule } from 'ngx-wordpress';

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
WordPressModule.forRoot('http://localhost/manoj/wordcamp/'),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
`

How to retrieve a posts list from a specific post type?

How to specify the type of post we want in the collection?

Add WordPressMockModule for development

http://jasonwatmore.com/post/2018/06/22/angular-6-mock-backend-example-for-backendless-development

Retrieve categories in heirarchy

It would be great to be able to get a Categories collection with children categories already in the parent objects.

Right now, you can filter the Category array by .parent === 0 to get the "parent" categories, but there's no easy way to match up all the children categories to their parents.

On wordpress sites, there's a pretty standard category widget that you can drop in with a "Show hierarchy" option. I can imagine this is something that a lot of people will want to do with the api, and thus with this library.

ERROR in node_modules

Hi, great work man. :)

After ng serve I've got an error:
ERROR in node_modules/@ngx-wordpress/core/lib/wordpress.service.d.ts(27,12): error TS2307: Cannot find module '../../../../../../../../../Users/Murhaf/Desktop/Github/ngx-wordpress/node_modules/rxjs/internal/Observable'.

Not able use in my application

Error : ng2-progressbar not found

I have follow this step -

1. • I have install in node_modules using given command :
2. • define in system.config.js as :
     map: {
     'ng2-progressbar': 'npm:ng2-progressbar
     }
     3)- importing in app.module.ts as :
     import { NgProgressModule } from "ng2-progressbar";
     @NgModule({
     imports: [NgProgressModule],
     declarations: [ ],
     bootstrap: [ ]
     })
     4)- Importing in app.component.ts as :
     import {NgProgressService} from "ng2-progressbar";
     @component({
     selector: 'my-app',
     template: <ng-progress></ng-progress> <h1>Hello {{name}}</h1>
     })
     export class AppComponent {
     name = 'Angular delhi';
     constructor(private pService: NgProgressService) {
     }

ngOnInit(){
/** request started /
this.pService.start();
this.http.get('abc.com').subscribe(res){
/* request completed */
this.pService.done();
}
}
}

Then Error in console ------ :

GET http://localhost:3000/node_modules/ng2-progressbar/ 404 (Not Found) zone.js:1645

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-progressbar(…) (index):16

How to use WpPost

Somehow I can not use WpPost class. Is there anywhere i need to import the class. Using the examples causes only errors;

In template, it causes normal data to disapear.

{{ post?.title.rendered }}

{{post?.title()}}

Only the first title appears,, the second doesn't. The second and next

don't display anything;

Missing 'Directive Model usage' in depth

There is currently a gist for Directive Collection usage in depth, but no gist for Directive Model usage in depth.

why not use angular-cli, instead have a bloated build spec?

Support Angular 5

Thank you for the project. Possible to support Angular 5?

Not work methods of WpPost instance

constructor(
    private wpService: WpService,
    private route: ActivatedRoute,
    private location: Location
  ) {}
  /** Post Response */
  post: WpPost;
  /** Post Endpoint */
  endpoint = WpEndpoint.posts;
  /** Model */
  model;
  //
  postEmbed;
  ngOnInit(){
    let slug = this.route.snapshot.params['slug'];
    console.log(slug);
    let args = {
      _embed: true,
      slug: slug
    };
    this.model = this.wpService.collection().posts();
    this.model.get(args).subscribe( (res: ModelResponse) => {
      if( res.error ) {
        console.log(res.error);
      }
      else {
        this.post = new WpPost( res.data[0] );
        console.log(this.post);
        this.postEmbed = {
          // in component class that works
          featuredImage: this.post.featuredImageUrl('full')
        };
      }
    } );
   
  }

but in template not work

<img [src]="post.featuredImageUrl('full')">

Add photon support for post featuredImage

No provider for WpHttp

Get this error :
No provider for WpHttp

my app.module.ts import the library in this way

import { WpService } from 'ng2-wp-api';

@NgModule({
  declarations: [
...
  ],
  imports: [
...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
...
  ],
  providers: [
    { provide: ErrorHandler, useClass: IonicErrorHandler },
     WpService
  ]

This is my setup:
Ionic Framework: 2.0.1
Ionic Native: 2.4.1
Ionic App Scripts: 1.1.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 7.4.0

Support for Joomla

Hi Murhaf Sousli,

Do you plan to create Angular library for Joomla integration?

Kind regards,
Abelardo.

TypeError 'map' of null

Getting this in the console on first page load:

Error: Uncaught (in promise): TypeError: Cannot read property 'map' of null
TypeError: Cannot read property 'map' of null
at new ConfigService (http://localhost:4200/vendor.bundle.js:26138:30)
at wpConfigFactory (http://localhost:4200/vendor.bundle.js:96289:12)

I'm initializing the module exactly how the docs state:
WordPressModule.forRoot('https://www.gideonlabs.com/', null, true),

Angular 11 support?

Hello, do you plan to bump support up to Angular 11? I could help with that if you're open to support.

Issue on Filter

Thanks for this wonderful package! I found some issue.

An example: I need to select a post with from a slug.

The endpoint is: /wp-json/wp/v2/posts/?filter[name]=my-slug-post

Problem 1
I can't pass the name param inside the filter (filter[name])

Problem 2
I cant't make a request with only filter param, but I need to pass an ID like this:
/wp-json/wp/v2/posts/{ID}?filter[name]=my-slug-post

Thanks for the good work