0

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?

cointreau17
  • 21
  • 4
  • Where do you have `myserver/mypath/dist/` defined at? I don't see it in your question. – Chris Sharp Oct 28 '17 at 18:35
  • That route is the server path where i have the projet source – cointreau17 Oct 28 '17 at 20:28
  • Will you post the code that handles incoming routes? – Chris Sharp Oct 28 '17 at 20:41
  • I dont understand your question...the handler is the Angular routing array defined in the app.module.ts file where It redirect each component. In my local works but in server route not. – cointreau17 Oct 29 '17 at 00:14
  • I will put an example of what I mean below as an answer. I'm using the answer format simply because I can actually show you a formatted code example. If it doesn't clear up your issue, or if I'm totally misunderstanding your problem, then I will delete it rather than muddy this question. – Chris Sharp Oct 29 '17 at 00:23

3 Answers3

0

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.

Daniel Klischies
  • 1,095
  • 7
  • 14
0

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 { }
Chris Sharp
  • 2,005
  • 1
  • 18
  • 32
  • Now i understand. I thought that like root path redirects { path: '', component: HomeComponent }, "/login" path can redirect { path: 'login', component: LoginComponent }. I am going to try this other way and i will tell you if it works. thanks! – cointreau17 Oct 29 '17 at 09:23
  • Hi, I have studing the angular guide about router [link](https://angular.io/guide/router) and executig the code of hero example in the server it happens the same problem, for example, clicking in Crisis Center it redirect – cointreau17 Oct 29 '17 at 23:21
  • Sorry for previos answer, I wanted write this: Hi, I have been reading the Angular guide about router [link](https://angular.io/guide/router) and executig the simple code of hero example in the server, happens the same problem. – cointreau17 Oct 29 '17 at 23:36
  • For example, clicking in Crisis Center it redirect correctly but if I try directly in Chrome navigation bar "http://myserver/mypath/hero/crisis-center" it doesn't work. Server return default page 404 - Not Found although i have { path: '**', component: PageNotFoundComponent } redirection to other component in appRoutes. Maybe the problem is in Apache server? I'm not using any .htaccess file. – cointreau17 Oct 29 '17 at 23:36
  • Have you tried to print the incoming path to make sure it matches what you think it should match? – Chris Sharp Nov 02 '17 at 21:44
0

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!

cointreau17
  • 21
  • 4