Question

我将Angular2应用程序部署在服务器上作为Docker镜像，由NginX提供服务。

但是发生了一些奇怪的事情。当我在本地运行我的webpack-dev-server时，检查它是否构建正常，我得到了预期的视图

其中根组件包含描述和链接，第二个包含“热门帖子”和其他内容。

然后，我用NginX将其打包到Docker镜像中并在服务器上提供。但不是上面的观点我得到了这个

控制台没有显示任何内容。

加载子组件出现问题的原因是什么？配置如下。

的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 {
}

询问您是否需要更多

Answer 1

如果您考虑到这一点，服务器上没有文件或目录/仪表板，因此启动应用程序的方法是检查404并“重定向”到已知位置/index.html

因此，将此片段添加到您的nginx配置应该可以完成这项工作：

location / {
    try_files $uri $uri/ /index.html =404;
}

使用NginX

1 个答案: