Routing in Angular 4 - html

Question

I have an issue with routing in my app. In my local all works right but not on the server. The program has the following routes:
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'thankyou', component: ThankyouComponent },
{ path: 'home', component: UserHomeComponent, canActivate: [AuthGuard] },
{ path: 'publish', component: PublishComponent, canActivate: [AuthGuard] },
{ path: '**', component: PageNotFoundComponent }
];
The root route always works.
If on my computer I send request directly, for example, the route:
http://localhost:4200/publish
Assuming that I have logged in there are no problems loading it. But if execute that route in server with the route:
http://myserver/mypath/dist/publish
It doesn't find the route.
I modified index.html as well, to execute on server.
<base href="/"> by <base href="/mypath/dist/">
If I execute that route by the template html using directive
routerLink="/publish"
It works fine.
Does anyone know why this happens?

Answer 1

Your webserver needs to be configured to reroute requests to your index.html, excluding assets.
For nginx, add this inside your server block of your nginx.conf or your site config:
location / {
try_files $uri $uri/ /path/to/index.html;
}
For apache, check this answer.

Answer 2

Here is an example of a file that creates a routing structure for the routes to hit when they are put into the url. So far I have not seen anything in your question that suggests you are actually handling routes from outside your app. In other words, how does some url from your server know where to go if you haven't defined a route that would be typed in as a url? Seems you don't have a root path. That's what I've been driving at.
import { Routes, RouterModule } from '#angular/router';
import { SomeComponent } from 'app/components/some-component';
import { Path1Component } from 'app/components/path1-component';
import { Path2Component } from 'app/components/path2-component';
import { Path3Component } from 'app/components/path3-component';
const MyRoutes: Routes = [
{
path: 'root/',
component: SomeComponent,
children: [
{
path: 'path1',
component: Path1Component
},
{
path: 'path2',
component: Path2Component
},
{
path: 'path3',
component: Path3Component
},
{
path: '**', // default path
component: Path2Component
}
],
}
];
#NgModule({
imports: [
RouterModule.forChild(MyRoutes)
],
exports: [
RouterModule
]
})
export class MyRouting { }

Answer 3

I have found the solution in this site https://github.com/angular/angular/issues/11884
but I don't have full access to server. I have switched in root module to HashLocationStrategy as the angular guide says here https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles
and it works!