"no post found" in production

[hussain-t]

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.

[stuartwk]

Hey Hussain, when you built for production, did you add a deploy-url? Production build command should look like ng build --prod --deploy-url="/wp-content/themes/{THEME_DIRECTORY_NAME}/dist/". Besides that, in the environment.prod.ts file, make sure it's pointed correctly at your site. I just tested it and I'm getting posts back. Hope that helps!

[malv7]

Hi there,

i have the same problem. For the local apache server i use Xampp.

What i did:

1. Downloaded your repo as .zip
2. Installed a new wordpress (4.7.3) to C://xampp/htdocs/mg/
3. Copied all files from the repo to C://xampp/htdocs/mg/wp-content/themes/wpng2/ {ALL YOUR FILES HERE}
4. Runned npm install
5. Updated the environment.ts:

export const environment = {
  production: false,
  wpBase: '//localhost/mg/wp-json/wp/v2/'
};

6. Updated the environment.prod.ts:

export const environment = {
  production: true,
  wpBase: '//localhost/mg/wp-json/wp/v2/'
};

7. Build the project from C://xampp/htdocs/mg/wp-content/themes/wpng2/:

ng build --prod --deploy-url="/mg/wp-content/themes/wpng2/dist/

8. Serving localhost/mg/ with Xampp apache and sql server running:

Doppia East

no post found

9. Serving the app with ng serve -o:

Doppia East

• Random blog post
• Hello world!

There are no errors in the chrome dev tools console. Any ideas?

Greetings

[stuartwk]

This is kind of odd. Maybe in the deploy URL, try using the full path for localhost? You can also check the dist folder the build creates. Inside of index.html, check the paths on the javascript files to see if they are pointing to your localhost setup.

Just a note, if you are running on localhost, I'm assuming this is for dev, so it's probably fine just using ng serve. The instructions for production are more geared towards launching on a live site. But you're right, you should be able to run a production build and have it work on localhost too.

[uclides]

hi, i am present the same problem mentioned previously. in the console i can see "Failed to load resource" in "posts?slug=wordpress". Ii never call the posts with this slug

[mr-moto]

hey @stuartkuentzel, cool work on this! i'm still new to angular so i'm not super familiar with everything, yet!

I have the same problem as everyone above where i get the 'no post found' line on my localhost running MAMP.

the slug used to access my site eg. localhost:8888/{slug} is being used for posts?slug=. I did a little test and made a post with the same name as {slug} and the post showed up. I don't actually know how to fix this but I suspect it will work fine on a live site?

[uclides]

Hi, @mr-moto I fixed this issue changing the route in the app-routing.module.ts file. in my case is testing with tomcat. My route is http://localhost:8181/wordpress then in the file add this code:

const routes: Routes = [ ... { path: 'wordpress', component: PostListComponent, pathMatch: 'full' } ];

I hope I help you

[stuartwk]

Hey, I just tried to replicate this using MAMP, and still couldn't get it to break. Just setting the path in environment.prod.ts and adding the --deploy-url to the build and for me it's working.

If you guys think you got a fix, since this seems to be a problem for a couple people, feel free to make a pull request.

[NunoAraujo]

Hi there,

For the people who are trying to run this in a local XAMPP/MAMP server as a production server just change the index.html base tag to:

<base href="/{your_site_folder_name_here}">

so that your folder name isn't read has a url parameter.

At least that's how I fixed it.

Hope it helps.