不能不使用 angular-cli http-server 进行部署，无法访问任何页面

Question

我的项目如果使用'ng服务'可以运行，则可以正常工作。但是，一旦使用" http-server ./dist"部署在服务器上，无法访问任何页面，它将显示出类似于以下的错误信息：

host:~/morange/project$ http-server ./dist
Starting up http-server, serving ./dist
Available on:
http://127.0.0.1:8083
http://***.**.*.**:8083 (sorry, author comment this ip)
http://**.*.*.*:8083  (sorry, author comment this ip)
Hit CTRL-C to stop the server
[Wed Dec 21 2016 09:56:45 GMT+0800 (SGT)] "GET /login" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"
[Wed Dec 21 2016 09:56:45 GMT+0800 (SGT)] "GET /login" Error (404): "Not found"

Chrome还将显示这样的错误：

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''
Error: Cannot match any routes: ''
    at ApplyRedirects.noMatchError (http://172.28.2.60:8083/main.bundle.js:58431:16)
    at CatchSubscriber.selector (http://172.28.2.60:8083/main.bundle.js:58409:29)
    at CatchSubscriber.error (http://172.28.2.60:8083/main.bundle.js:47123:31)
    at MapSubscriber.Subscriber._error (http://172.28.2.60:8083/main.bundle.js:5802:26)
    at MapSubscriber.Subscriber.error (http://172.28.2.60:8083/main.bundle.js:5776:18)
    at CatchSubscriber.error (http://172.28.2.60:8083/main.bundle.js:47126:34)
    at FirstSubscriber._complete (http://172.28.2.60:8083/main.bundle.js:63685:25)
    at FirstSubscriber.Subscriber.complete (http://172.28.2.60:8083/main.bundle.js:5788:18)
    at MergeAllSubscriber._complete (http://172.28.2.60:8083/main.bundle.js:30253:30)
    at MergeAllSubscriber.Subscriber.complete (http://172.28.2.60:8083/main.bundle.js:5788:18)

这是路由的一部分代码

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'login',
        component: LoginComponent,
      },
      {
        path: '',
        component: MainBaseComponent,
        children: [
          {
            path: 'basicinfo',
            component: BasicInfoComponent,
            canActivate: [LoggedInGuard]
          },
          {
            path: 'demand-sub-category',
            component: DemandCategoryComponent,
            canActivate: [LoggedInGuard]
          },
          {
            path: 'demand-trend-compare',
            component: DemandCompareComponent,
            canActivate: [LoggedInGuard]
          },
          {
            path: 'newpush',
            component: NewPushComponent,
            canActivate: [LoggedInGuard]
          },
          {
            path: 'pushrecord',
            component: PushRecordComponent,
            canActivate: [LoggedInGuard]
          },
        ]
      },
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

package.json的脚本：

  "scripts": {
    "start": "ng serve",
    "lint": "tslint "src/**/*.ts"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "server-start": "http-server",
    "preinstall": "npm install -g http-server",
    "postinstall": "ng build && mv dist/* ."
  },

Answer 1

它缺少有效的基础href !!

添加您的index.html

<base href=".">

或在用Angular-CLI制造产品时，运行命令

ng build --prod --base-href .

P.S：不要忘记。（点）

Answer 2

我想我找到了以前的路由的原因，似乎无法转到任何页面：

RouterModule.forRoot([
      {
        path: 'login',
        component: LoginComponent,
      },
      {
        path: '',
        component: MainBaseComponent,
        children: [
          {
            path: 'basicinfo',
            component: BasicInfoComponent,
            canActivate: [LoggedInGuard]
          },
          {
            path: 'demand-sub-category',
            component: DemandCategoryComponent,
            canActivate: [LoggedInGuard]
          },
         ]
        }
      ])

这是我进行一些更改以进行路由之后的代码，然后使用IP和端口，将导致登录页面。

 RouterModule.forRoot([
      {
         path: '',
         component: LoginComponent,
      },
      {
        path: 'main',
        component: MainBaseComponent,
        children: [
          {
            path: 'basicinfo',
            component: BasicInfoComponent,
            canActivate: [LoggedInGuard]
          },
          {
            path: 'demand-sub-category',
            component: DemandCategoryComponent,
            canActivate: [LoggedInGuard]
          },]
    }
  ])

我认为应该在外层设置路径'。不清楚原因，会挖掘到Angular2路由。

Answer 3

http-server不支持html5模式，我认为这就是为什么您获得404-https：//github.com/indexzero/indexzero/http-server/issues/80

尝试https://github.com/scottcorgan/pushstate-server