Я развернул приложение Angular2 на сервере как изображение Docker, где он обслуживается NginX.
Но что-то странное. Когда я запускал свой webpack-dev-сервер локально, чтобы проверить, правильно ли он строит, я получаю ожидаемое представление
Где корневой компонент содержит описание и ссылки, а второй содержит «Топ-сообщения» и другие материалы.
Затем я упаковал его в изображение Docker с помощью NginX и работал на сервере. Но вместо представления выше я получил это
Консоль ничего не показывает.
Что может быть причиной проблем с загрузкой подкомпонентов? Конфигурация ниже.
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 { }
Спросите, хотите ли вы еще
Если вы думаете об этом, на сервере нет файла или каталога / панели мониторинга, поэтому способ заставить приложение работать, это проверить 404 и «перенаправить» на известное местоположение, которое является /index.html
Таким образом, добавление этого фрагмента в конфигурацию nginx должно выполнять следующее задание:
location / { try_files $uri $uri/ /index.html =404; }