我将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 {
}
询问您是否需要更多
答案 0 :(得分:2)
如果您考虑到这一点,服务器上没有文件或目录/仪表板,因此启动应用程序的方法是检查404并“重定向”到已知位置/index.html
因此,将此片段添加到您的nginx配置应该可以完成这项工作:
location / {
try_files $uri $uri/ /index.html =404;
}