angular - Angular 6 重新加载页面显示 404

Question

我是 angular 的新手。目前我面临一个问题，即，ng serve完美地为我工作，没有任何问题，但是当我使用ng build它时，它会显示在浏览器中加载。然后在我index.html <base href="/">将 dist 文件夹更改为<base href="./">我可以访问该页面后。但是通过使用这种方法，如果我刷新页面，它会显示 404。注意我不能使用useHash: true，因为我需要我的 url seo 友好。我试过这个但不工作的解决方案

这是我的路由模块

import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import {
  NbAuthComponent,
  NbLoginComponent,
  NbLogoutComponent,
  NbRegisterComponent,
  NbRequestPasswordComponent,
  NbResetPasswordComponent,
} from '@nebular/auth';
// import { LandingContentComponent } from './components/landing-content/landing-content.component';
import { DtCoreModule } from './dt-broker/dt-core/dt-core.module';
import { DtCoreRoutingModule } from './dt-broker/dt-core/dt-core-routing.module';
// import { MyAccountComponent } from './components/my-account/my-account.component';
import { AuthGuardService } from './guards/auth-guard.service';
import { AuthService } from './guards/auth.service';
import { BrokerMembershipComponent } from './components/broker-membership/broker-membership.component';
import { BrokerCompleteSignupComponent } from './components/broker-membership/broker-complete-signup/broker-complete-signup.component';
import { BrokerMembershipUpgradeComponent } from './components/broker-membership/broker-membership-upgrade/broker-membership-upgrade.component';
import { BrokerMembershipPlanUpgradePaymentComponent } from './components/broker-membership/broker-membership-upgrade/broker-membership-plan-upgrade-payment/broker-membership-plan-upgrade-payment.component';



const routes: Routes = [
  {
    path: 'pages',
    loadChildren: 'app/pages/pages.module#PagesModule'
  },
  { 
    path: 'created/preview/:id',
    loadChildren: 'app/preview/preview.module#PreviewModule'
  },
  {
    path: 'admin',
    component: NbAuthComponent,
    children: [
      {
        path: '',
        component: NbLoginComponent,
      },
      {
        path: 'login',
        component: NbLoginComponent,
      },
      {
        path: 'register',
        component: NbRegisterComponent,
      },
      {
        path: 'logout',
        component: NbLogoutComponent,
      },
      {
        path: 'request-password',
        component: NbRequestPasswordComponent,
      },
      {
        path: 'reset-password',
        component: NbResetPasswordComponent,
      },
    ],
  },
  {
    path: 'signup',
    loadChildren: './components/signup-m/signup-m.module#SignupMModule',
  },
  {
    path: '',
    loadChildren: './components/landing-content-m/landing-content-m.module#LandingContentMModule',
  },
  {
    path: '**',
    loadChildren: './components/landing-content-m/landing-content-m.module#LandingContentMModule',
  },
  {
    path: 'user',
    loadChildren: './components/landing-content-m/landing-content-m.module#LandingContentMModule',
  },
  {
    path: 'user/:id',
    loadChildren: './components/landing-content-m/landing-content-m.module#LandingContentMModule',
  },
  {
    path: 'signin',
    loadChildren: './components/sign-in-m/sign-in-m.module#SignInMModule',
  },
  {
    path: 'profile',
    loadChildren: './components/profile-m/profile-m.module#ProfileMModule',
    canActivate: [AuthGuardService]
  },
  {
    path: 'coming-soon',
    loadChildren: './components/coming-soon-m/coming-soon-m.module#ComingSoonMModule',
  },
  {
    path: 'my-account',
    loadChildren: './components/my-account/my-account.module#MyAccountModule',
  },
  {
    path: 'email-preference',
    loadChildren: './components/email-preference-m/email-preference-m.module#EmailPreferenceMModule',
    canActivate: [AuthGuardService]
  },
  {
    path: 'search-result',
    loadChildren: './components/search-result-m/search-result-m.module#SearchResultMModule',
  },
  {
    path: 'broker-search',
    loadChildren: './components/broker-search-m/broker-search-m.module#BrokerSearchMModule',
  },
  {
    path: 'saved-searches',
    loadChildren: './components/saved-serches-m/saved-serches-m.module#SavedSerchesMModule',
    canActivate: [AuthGuardService]
  },
  {
    path: 'saved-listing',
    loadChildren: './components/saved-listings-m/saved-listings-m.module#SavedListingsMModule',
    canActivate: [AuthGuardService]
  },
  // {
  //   path: 'broker-membership',
  //   component: BrokerMembershipComponent,
  // },
  {
    path: 'broker-membership',
    loadChildren: './components/broker-membership-m/broker-membership-m.module#BrokerMembershipMModule',
  },
  {
    path: 'broker-details/:id',
    loadChildren: './components/broker-details-m/broker-details-m.module#BrokerDetailsMModule',
  },
  {
    path: 'view-listing/:id',
    loadChildren: './components/list-search-single-m/list-search-single-m.module#ListSearchSingleMModule',
  },
  {
    path: 'user-listing',
    loadChildren: './components/addlist-m/addlist-m.module#AddlistMModule',
    canActivate: [AuthGuardService]
  },
  {
    path: 'contact',
    loadChildren: './components/contact-m/contact-m.module#ContactMModule',
  },
  {
    path: 'about',
    loadChildren: './components/about-us/about-us.module#AboutUsModule',
  },
  {
    path: 'emailalert',
    loadChildren: './components/emailalert-m/emailalert-m.module#EmailalertMModule',
    canActivate: [AuthGuardService]
  },
  {
    path: 'how-to-sell',
    loadChildren: './components/how-to-sell-m/how-to-sell-m.module#HowToSellMModule',

  },
  {
    path: 'equity',
    loadChildren: './components/equity-m/equity-m.module#EquityMModule',
  },
  {
    path: 'my-mail-box',
    loadChildren: './components/usermailbox-m/usermailbox-m.module#UsermailboxMModule',
    canActivate: [AuthGuardService]
  },
  {
    path: 'guide-to-selling',
    loadChildren: './components/guide-to-selling/guide-to-selling.module#GuideToSellingModule',
  },
  {
    path: 'guide-to-buying',
    loadChildren: './components/guide-to-buying/guide-to-buying.module#GuideToBuyingModule',
  },
  {
    path: 'my-billing-information',
    loadChildren: './components/billing-information-m/billing-information-m.module#BillingInformationMModule',
    canActivate: [AuthGuardService]
  },
  {
    path: 'broker-complete-signup-process',
    component: BrokerCompleteSignupComponent,
  },
  // {
  //   path: 'broker-membership-upgrade',
  //   component: BrokerMembershipUpgradeComponent,
  // },
  {
    path: 'broker-membership-upgrade-payment',
    component: BrokerMembershipPlanUpgradePaymentComponent,
  },

];

 const config: ExtraOptions = {
   useHash: false
 };

@NgModule({
  imports: [DtCoreModule, DtCoreRoutingModule, RouterModule.forRoot(routes, config)],
  exports: [RouterModule],
  providers: [AuthGuardService, AuthService]
})

export class AppRoutingModule {
}

标签： angularangular6