我建立与Angular6的帮助应用程序和路由面临的问题。所有路由工作时，我点击一个特定的标签，但每当我刷新当前页面，它抛出404错误。我所看到的关于在堆栈溢出这个问题很多职位，但未能从这个问题需要克服。
下面是我app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AppComponent} from './app.component';
import {FetchApiComponent} from './fetch-api/fetch-api.component';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {UserServiceLatest} from './fetch-latest/app.service';
import {UserServiceTop} from './fetch-top/app.service';
import {YoutubePlayerModule} from 'ngx-youtube-player';
import {SidebarComponent} from './sidebar/sidebar.component';
import {FetchLatestComponent} from './fetch-latest/fetch-latest.component';
import { FetchTopComponent } from './fetch-top/fetch-top.component'
import {UserService} from './fetch-api/app.service';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { AngularFireModule } from 'angularfire2';
import * as firebase from 'firebase';
import { firebaseConfig } from './../environments/firebase.config';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import {PushService} from './push.service';
const appRoutes: Routes = [
{
path: '',
component: FetchApiComponent
},
{
path: '/latest',
component: FetchLatestComponent
},
{
path: '/top',
component: FetchTopComponent
},
{
path :'*',
component: FetchApiComponent
}
];
firebase.initializeApp(firebaseConfig);
@NgModule({
declarations: [
AppComponent,
FetchApiComponent,SidebarComponent, FetchLatestComponent, FetchTopComponent
],
imports: [
RouterModule.forRoot(appRoutes),
BrowserModule, YoutubePlayerModule,
FormsModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,environment.production ?ServiceWorkerModule.register('firebase-messaging-sw.js'):[],ServiceWorkerModule.register('/firebase-messaging-sw.js', { enabled: environment.production }),
HttpClientModule,environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : [], ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
],
providers: [UserService,UserServiceTop,UserServiceLatest,PushService],
bootstrap: [AppComponent]
})
export class AppModule {}
你能指出我在正确的方向？
你会在你的榜样的网址看到，一旦你的404错误，你不能让它工作，但如果你包括像/#latest它会工作的角度，特定的URL之前的哈希值。
为什么停止工作时刷新？你的服务器是拦截从你的浏览器的GET请求，并试图直接进入目录/latest，它不存在。它不知道它需要去/bosv2，找到一个角度应用程序，然后小的结局位添加到您的路径这是一个不实际的目录但对角路由。在当地，将工作当你正在做纳克服务，Web服务器的WebPack为这你在哪里托管应用程序编写，而不是主机。
默认情况下，角是使用HTML5式的导航，但你目前的网络服务器设置，您就需要老angularjs风格（与哈希＃）。
从这里，你有两种解决方案：
useHash: true去老派与HashLocationStrategy。
@NgModule（{进口：[... RouterModule.forRoot（路线，{useHash：真}）// ... /＃/最新/] ...我会说去散风格有两个缺点，这可能不是在您的情况有关：
希望你找到这个答案有帮助:)
随着的.htaccess你可以用以下也尝试方式：
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html
# to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>
为了避免使用散列路线，必须正确编辑你的网络服务器配置，这是最好的解决方案。你只需要配置它，所以它回退给index.html，这是角度的引导。虽然这没有统一的配置，这里有一些：
阿帕奇
添加重写规则.htaccess文件
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
Nginx的
使用try_files在您所在的位置块
try_files $uri $uri/ /index.html;
及其
添加重写规则web.config
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
在app.module.ts
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
导入后添加下面一行到供应商。
{provide: LocationStrategy, useClass: HashLocationStrategy}
例如：
providers: [AuthService,
AuthGuard,
FlxUiDataTable,
{provide: LocationStrategy, useClass: HashLocationStrategy}]
这将解决您的问题。阅读Documentation这里。
我觉得你得到404，因为你的请求不Tomcat服务器上存在http://localhost/route。由于角2使用HTML 5路由默认情况下，而不是使用散列在URL的末尾，刷新页面看起来像一个不同的资源的请求。
当Tomcat上采用了棱角分明的路由，你需要确保你的服务器将同时刷新网页应用中的所有路由映射到你的主要的index.html。有解决这个问题多渠道。哪一个适合你，你可以去试试。
1）把下面的代码在部署文件夹中的web.xml文件：
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
2）您也可以尝试在URL路由的使用HashLocationStrategy以＃：
尝试使用：
RouterModule.forRoot（路线，{useHash：真}）
代替：
RouterModule.forRoot（路由）
随着HashLocationStrategy您的网址会像：
3）Tomcat的URL重写阀门：重写URL的使用服务器级配置重定向到index.html的，如果未找到资源。
3.1）内META-INF文件夹中创建文件的context.xml并复制里面的背景之下。
<? xml version='1.0' encoding='utf-8'?>
<Context>
<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Context>
3.2）内部WEB-INF，创建文件rewrite.config（该文件包含URL重写规则和URL重写使用的Tomcat）。里面rewrite.config，复制下面的内容：
的RewriteCond％{} SERVLET_PATH！-f
重写规则^ /（。*）$ /index.html [L]
在我来说，我没有以后的事
方法1：
在app.module.ts导入下面的事情
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
@NgModule({
declarations: [...],
imports: [...],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [AppComponent]
})
并建立与
集结基本href / [PROJECT_NAME] /
方法2：
为nginx的，
纳米的/ etc / nginx的/网站可用/默认
添加下面的行中的位置的块
location /[PROJECT_NAME] {
try_files $uri $uri/ /[PROJECT_NAME]/index.html;
}
须藤服务nginx的重启
并建立与
集结基本href / [PROJECT_NAME] /