当应用程序运行在外部服务器上时，所有请求都无法找到（404）。

9 浏览
0 Comments

当应用程序运行在外部服务器上时，所有请求都无法找到（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>

编辑：

这是文件夹结构：

$ 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。

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

请检查你的路由模块\"RoutesRoutingModule\"！它应该长这样：\n

environment.useHash = true;
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: environment.useHash,
      relativeLinkResolution: 'legacy',
    }),
  ],
  exports: [RouterModule],
})

0
0 Comments

The ng build --prod command pushes all required files under the /dist folder. You just need to copy those files in the server.

If you want to serve the content from the /dist folder

  1. install angular-http-server
  2. serve the application as in angular-http-server --path dist/
0