Angular2 404 页面刷新本地主机答案

【问题标题】：Angular2 404 on page refresh localhostAngular2 404 页面刷新本地主机
【发布时间】：2017-11-22 01:24:58
【问题描述】：

// Angular module import
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RouterModule, Routes } from '@angular/router'

import { NavComponent } from './nav/nav.component'
import { siteComponents } from './components'
import { loginForm } from './loginform/login.component'
import { LoaderComponent } from './loader/loader.component'

import { appRoutes } from './routes'

@NgModule({
     imports: [BrowserModule,
     RouterModule.forRoot(appRoutes)
     ],
        declarations: [
            siteComponents,
            NavComponent,
            loginForm,
            LoaderComponent
            ],
        bootstrap: [siteComponents, LoaderComponent]
 })
 export class AppModule {}

我有以下代码来为我的 angular2 应用程序实现路由。如果重定向到，路由运行良好，但刷新时我得到 404。我需要帮助来获得刷新工作的路线。我正在使用 http-server。

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

尝试开启forRoot上的hash标志如下：

RouterModule.forRoot(appRoutes, {useHash: true,})

【讨论】：

【解决方案2】：

每当您刷新浏览器时，它都会尝试访问 site.domain/actual-route，这显然不存在。一种方法是 Jota 建议切换到哈希导航。不过html5导航也不是太难实现。

使用更可定制的后端，例如 express.js

var express = require('express');
var path = require('path');
var router = express.Router();

router.use('/', express.static('app', { redirect: false }));
    router.get('*', function (req, res, next) {
    res.sendFile(path.resolve('app/index.html'));
});

module.exports = router;

试试https://www.npmjs.com/package/angular-http-server

配置 nginx 或 apache 以重定向到 index.html。阿帕奇示例：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.html [L]

【讨论】：

好的，尼克。谢谢你。会试试的。

【解决方案3】：

使用 ng cli 重新启动应用程序，一切正常。

【讨论】：

这个解决方案根本没有帮助，你只是决定忽略这个问题。