0

I deployed my Angular2 app on server as a Docker image, where it's served by NginX.

But something strange happend. When i ran my webpack-dev-server locally, to check if it builds ok, i get expected view

locally

Where root component contains description and links, and second one contains "Top Posts" and other stuff.

Then, I packed it up into Docker image with NginX and served on the server. But instead of view above I got this

server

Console shows nothing.

What might be the cause of problems with loading subcomponents? Configuration below.

index.html

<html>

  <head>
    <base href="/">
    <title>Zielony</title>
    <meta charset="utf-8">
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>

  <script src="/app.js"></script>
</html>

boot.ts

export const routes: RouterConfig = [
{
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
},
{
    path: 'posts',
    component: PostsComponent,
    canActivate: [LoggedInGuard]
},
{
    path: 'dashboard',
    component: PostsDashboardComponent
},
{
    path: 'posts/:id',
    component: PostDetailComponent
},
{   path: 'login',
    component: LoginComponent
},
{   path: 'signup',
    component: SignUpComponent
},
];

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    provideRouter(routes),
    disableDeprecatedForms(),
    provideForms(),
    LoggedInGuard,
    { provide: APP_CONFIG, useValue: POSTS_CONFIG },
    UserService,
    PostService
]);

app.component.ts

@Component({
    selector: 'my-app',
    template: `
        <h1>My First Zielony Angular 2 App</h1>
        <nav>
            <a routerLink="/dashboard" routerLinkActive="active">Post Dashboard</a>
            <a routerLink="/posts" routerLinkActive="active">Posts</a>
        </nav>
        <router-outlet></router-outlet>
    `,
    styles: [some_css_here,],
    directives: [ROUTER_DIRECTIVES,]
})

export class AppComponent {
}

Ask if You want more

VanDavv
  • 836
  • 2
  • 13
  • 38
  • http://stackoverflow.com/questions/9184959/rewriting-nginx-for-pushstate-urls – Günter Zöchbauer Aug 29 '16 at 16:19
  • Probably a dup of http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser – Günter Zöchbauer Aug 29 '16 at 16:20
  • @GünterZöchbauer I don't see relation between this issue and those mentioned by You. Could You explain how they're resolving my issue? – VanDavv Aug 29 '16 at 16:24
  • It's all explained in the linked issues. The server needs to support HTML5 pushState (redirect all unknown URLs to `index.html`). – Günter Zöchbauer Aug 29 '16 at 16:34
  • What those links describe is how to get HTML5 routing to work (routing without using # in the address). When you do a link, the request goes to the SERVER which has to know how to direct the request. It should correctly send the request to the index.html so Angular gets a hold of it and can direct it to the router to handle. This means you have to configure the SERVER to redirect unknown requests to index.html instead of sending the normal 404 request (which causes the behavior you see). The other links Gunter posted tell you how to do that. – Steven Luke Aug 29 '16 at 16:38

1 Answers1

3

If you think about this, there is no file or directory /dashboard on the server so the way to get the application working is to check 404 and "redirect" to known location which is /index.html

So, adding this snippet to your nginx configuration should do the job:

location / {
    try_files $uri $uri/ /index.html =404;
}
Andrzej Piasecki
  • 327
  • 2
  • 5