当应用程序在外部服务器上运行时，所有请求均未找到 (404)
All requests are not found (404) when the application runs on an external server
我的应用程序在使用 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
ng build --prod 命令将所有必需的文件推送到 /dist 文件夹下。您只需要在服务器中复制这些文件。
如果您想提供 /dist 文件夹中的内容
- 安装
angular-http-server
- 按照
angular-http-server --path dist/ 中的方式提供应用程序
我的应用程序在使用 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
ng build --prod 命令将所有必需的文件推送到 /dist 文件夹下。您只需要在服务器中复制这些文件。
如果您想提供 /dist 文件夹中的内容
- 安装
angular-http-server - 按照
angular-http-server --path dist/ 中的方式提供应用程序