Не все запросы найдены (404) при запуске приложения на внешнем сервере

Мое приложение отлично работает при обслуживании с помощью команды ng serve или с помощью команды ng serve --prod, но когда я создаю его для производства с помощью команды ng build --prod, а затем обслуживаю с помощью команды http-server -p 8080 -c-1 dist/ng-zero или с помощью команды live-server --entry-file=dist/index.html, любой запрос имеет ответ 404.

Я просмотрел здесь разные вопросы и ответы на них, но ничего не помогло. Я попробовал вариант HashLocationStrategy, а также вариант useHash: true, но безуспешно.

Http-сервер, запускающий приложение:

$ http-server -p 8080 -c-1 dist/ng-zero
Starting up http-server, serving dist/ng-zero
Available on:
  http://127.0.0.1:8080
  http://192.168.0.7:8080
  http://172.19.0.1:8080
Hit CTRL-C to stop the server
[Sat Oct 13 2018 11:19:38 GMT+0200 (CEST)] "GET /" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36"
[Sat Oct 13 2018 11:19:38 GMT+0200 (CEST)] "GET /" Error (404): "Not found"

Он открывает новую вкладку браузера на http://127.0.0.1:8080/, но она пуста, а консоль говорит:

[Sat Oct 13 2018 11:19:38 GMT+0200 (CEST)] "GET /" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36"
[Sat Oct 13 2018 11:19:38 GMT+0200 (CEST)] "GET /" Error (404): "Not found"
[Sat Oct 13 2018 11:20:51 GMT+0200 (CEST)] "GET /" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36"
[Sat Oct 13 2018 11:20:51 GMT+0200 (CEST)] "GET /" Error (404): "Not found"

Сервер Lite, запускающий приложение:

$ ll dist/index.html 
-rw-rw-r-- 1 stephane 925 oct.  12 19:35 dist/index.html
[stephane@stephane-ThinkPad-X201 ng-zero (master)]
$ live-server --entry-file=dist/index.html
Serving "/home/stephane/dev/js/projects/angular/ng-zero" at http://127.0.0.1:8080

Он открывает новую вкладку браузера на http://127.0.0.1:8080/, но она пуста, а консоль вообще ничего не говорит.

Файл index.html:

$ cat src/index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NgZero</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#1976d2">
</head>
<body class="mat-app-background">
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

РЕДАКТИРОВАТЬ:

Вот структура папок:

$ tree 
.
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app-gui.module.ts
│   ├── app.module.ts
│   ├── app-preloading-strategy.ts
│   ├── app-routing.module.ts
│   ├── core
│   │   ├── auth
│   │   │   ├── auth-guard.service.ts
│   │   │   ├── auth.interceptor.ts
│   │   │   ├── auth.module.ts
│   │   │   ├── auth.service.ts
│   │   │   ├── keycloak-client.service.spec.ts
│   │   │   ├── keycloak-client.service.ts
│   │   │   ├── keycloak.interceptor.ts
│   │   │   ├── token.service.spec.ts
│   │   │   └── token.service.ts
│   │   ├── error
│   │   │   ├── error.component.html
│   │   │   ├── error.component.scss
│   │   │   ├── error.component.ts
│   │   │   ├── error-custom-handler.ts
│   │   │   ├── error.module.ts
│   │   │   ├── error-request-interceptor.ts
│   │   │   ├── error-routing.module.ts
│   │   │   ├── error.service.ts
│   │   │   └── index.ts
│   │   ├── login
│   │   │   ├── login.component.css
│   │   │   ├── login.component.html
│   │   │   ├── login.component.spec.ts
│   │   │   ├── login.component.ts
│   │   │   ├── login-dialog.component.html
│   │   │   └── login-dialog.component.ts
│   │   ├── messages
│   │   │   ├── messages.component.css
│   │   │   ├── messages.component.html
│   │   │   ├── messages.component.spec.ts
│   │   │   ├── messages.component.ts
│   │   │   ├── message.service.spec.ts
│   │   │   └── message.service.ts
│   │   └── service
│   │       ├── http.service.ts
│   │       ├── notification.service.ts
│   │       ├── pagination.service.ts
│   │       └── utils.service.ts
│   ├── core.module.ts
│   ├── material.module.ts
│   └── views
│       ├── dashboard
│       │   ├── dashboard.component.css
│       │   ├── dashboard.component.html
│       │   ├── dashboard.component.spec.ts
│       │   └── dashboard.component.ts
│       ├── home
│       │   ├── home.component.css
│       │   ├── home.component.html
│       │   ├── home.component.spec.ts
│       │   ├── home.component.ts
│       │   ├── home.module.ts
│       │   └── home-routing.module.ts
│       └── user
│           ├── search.component.css
│           ├── search.component.html
│           ├── search.component.spec.ts
│           ├── search.component.ts
│           ├── user.component.css
│           ├── user.component.html
│           ├── user.component.spec.ts
│           ├── user.component.ts
│           ├── users.component.css
│           ├── users.component.html
│           ├── users.component.spec.ts
│           ├── users.component.ts
│           ├── user.service.spec.ts
│           ├── user.service.ts
│           └── user.ts
├── assets
│   └── icons
│       ├── icon-128x128.png
│       ├── icon-144x144.png
│       ├── icon-152x152.png
│       ├── icon-192x192.png
│       ├── icon-384x384.png
│       ├── icon-512x512.png
│       ├── icon-72x72.png
│       └── icon-96x96.png
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── manifest.json
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── typings.d.ts

Я использую Angular 7 ^7.0.0-rc.0

request angular angular7

Stephane 12.10.2018 источник

comment

Ваше приложение вообще не обслуживается, и вы получаете 404 от HTTP-сервера? или ваш маршрутизатор Angular возвращает обработчик маршрута, не найденного? - Brandon 12.10.2018

comment

Я действительно не понимаю, что вы имеете в виду, когда говорите not served. - Stephane 13.10.2018

comment

Я добавил больше информации в вопрос. - Stephane 13.10.2018

Ответы (1)

arrow_upward
2
arrow_downward

Команда ng build --prod помещает все необходимые файлы в папку /dist. Вам просто нужно скопировать эти файлы на сервер.

Если вы хотите обслуживать контент из папки /dist

установить angular-http-server
подать заявку как в angular-http-server --path dist/

Sunil Singh 12.10.2018

comment

Зачем мне вообще копировать эти файлы? Сервер, с которого я его запускаю, может найти эти файлы. - Stephane; 13.10.2018

comment

NodeJS не будет знать об этом, если он должен запускать скомпилированные файлы (готовые к производству). Он будет продолжать использовать исходный файл разработки. Поэтому, как только файлы сгенерированы, вы можете поместить эти файлы на любой веб-сервер IIS или Apache. - Sunil Singh; 13.10.2018

comment

Пожалуйста, обратитесь к этому stackoverflow.com/questions/43389539/ - Sunil Singh; 13.10.2018

comment

Я следовал этим инструкциям https://angular.io/guide/service-worker-getting-started, где написано ng build --prod и http-server -p 8080 -c-1 dist/<project-name>. - Stephane; 13.10.2018

comment

Теперь я могу нормально обслуживать приложение, используя angular-http-server, как в angular-http-server --path dist/, но я хотел бы, чтобы оно работало и на других серверах. - Stephane; 13.10.2018

comment

Обновил ответ как запрос. - Sunil Singh; 13.10.2018

Не все запросы найдены (404) при запуске приложения на внешнем сервере

Ответы (1)

Вопросы по теме