【发布时间】：2018-11-27 04:44:21
【问题描述】：
我正在 Angular6 的帮助下构建一个应用程序，并面临路由问题。当我单击特定选项卡时，所有 路由 都在工作，但每当我 刷新 当前页面时，它都会抛出 404 错误。我在 Stack Overflow 上看到过很多关于这个问题的帖子，但未能解决这个问题。
下面是我的 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 {}
你能指出我正确的方向吗？
【问题讨论】：
-
如果您手动转到根路径，是否正确加载了 FetchApiComponent？是不是只有刷新的时候才会出现？
-
只有在我刷新页面时才会发生。例如：我的 URL 是：
http://localhost:4200/，页面上有导航链接，Fetch 就是其中之一，当我点击 Fetch 栏时，它会将 URL 设为：http://localhost:4200/fetch，它工作正常，但是当我刷新此页面时，它会向我抛出错误。 -
我不明白您第一次访问localhost:4200 时是如何工作的，因为它与您刷新页面一样......当您刷新时，尝试访问哪个 url？您是否在路由器的 javascript 控制台中收到错误？
-
好的，我明白了，这是由于你的网络服务器造成的，给我两分钟，我可以给你一个如何解决这个问题的例子
标签： angular6