Question

＆＃13;

// 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 {}

＆＃13;

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

Answer 1

尝试按如下方式打开forRoot上的哈希标记：

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

Answer 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。 Apache示例：

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

Answer 3

使用ng cli再次启动应用程序，一切正常。

页面上的Angular2 404刷新localhost

3 个答案: