Angular Activated Route not working on live site

Michael Cockinos 0
Viewed 40

This question relates to Angular and Firestore.

I am working on a simple voting site, where a person will scan a QR Code and get sent to a website with the Firestore Document ID in the url string.

https://<my-website/vote/<documentID_String>

This works fine on localhost, but not on a live site.

Localhost: http://localhost:4200/my/app/vote/1utI0PSDJPM48JREYj6M

Live Site: https://max-pinjarra.redhot.com.au/peoples-choice/vote/8H3XR4eImABcjlj9q4WS

This is the expected result: Expected Result

But on the live site, I get Page Not Found: Live Result and not what we want.

in my app-routing.module.ts:

const routes: Routes = [
  {
    path: 'vote/:id', component: VoteComponent
  },
  {
    path: '**',
    pathMatch: 'full',
    redirectTo: ''

  }
];

The QR Code will redirect to https:///peoples-choice/vote/

Website structure is: / where sub-folder is an Angular app (admin. entrant, peoples-choice, etc).

I hope that makes sense....

I can't work out why this works on localhost and not on the live site.

Any help would be fantastic please!

routes google-cloud-firestore angular
3 Answers

The reason is when you entering "/vote/:id" => you're asking the server for that vote route, which doesn't exist (as you're running client site angular app).

The solution is as follow:

  1. Make sure your server (where you put the angular app) can serve static files.
  2. Instructs the server to serve your angular app as static assets
  3. From step 2, let say you tell your server that "when I go to mysite.com/vote, you give me back my angular homepage".
    What you should do now is open index.html in your angular app and change the <base url to vote
  • Remember, step 3 tells your server to give the homepage, so you need a route - angular route/client route to go to other places/screens in your angular app. If you try to access something like vote/id by entering the url directly, you now again asking the server to give you the vote/id route.

I don't know what language of your server, don't know how you config your host/proxy. So it's just a general steps to follow. Hope my explanation is clear enough.
This is a common mistake when deploying to a server. I suggest you do some research on google, it will help you understand more about the issue.

userXxOk0

I think you need to look in to the url of the localhost

"my/app/vote" I still don't understand you route fully but I think there is no sign of "my" in the actual website

I think that's the issue why it's not able to redirect , count the slash

Chinmaya Sahoo0

configure like following to the app-routing.module.ts

const routes: Routes = [
{
    path: 'peoples-choice/vote/:id', component: VoteComponent
},
{
    path: '**',
    pathMatch: 'full',
    redirectTo: ''
}];
Chinmaya Sahoo0
Related