Angular RouterModule 在生产中不工作

Question

我的应用在生产环境中运行时遇到了问题。

我的应用使用来自@auth0/angular-jwt 的angular-jwt

如果用户拥有有效 token ，他将被转发到 MainScreenComponent，在其他地方他将被重定向到登录页面。

import { AuthGuard } from './services/Authentication/auth-guard.service';
import { AuthGuardLogin } from './services/Authentication/auth-guard-login.service';
import { AuthService } from './services/Authentication/auth.service';
import { BrowserModule , HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';

import { RouterModule } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { NoAccessComponent } from './components/no-access/no-access.component';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { ServiceWorkerModule } from '@angular/service-worker';
import { MainScreenComponent } from './components/main-screen/main-screen.component';
import { JwtModule } from '@auth0/angular-jwt';

export function tokenGetter() {
  return localStorage.getItem('token');
}

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NotFoundComponent,
    NoAccessComponent,
    MainScreenComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    RouterModule.forRoot([
       { path: '', component: MainScreenComponent , canActivate: [AuthGuard]},
       { path: 'login', component: LoginComponent,  canActivate: [AuthGuardLogin] },
       { path: '**', component: NotFoundComponent }
     ]),
     JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        whitelistedDomains: environment.whiteListDomains,
      }
    })
  ],
  providers: [
  AuthService,
  AuthGuard,
  AuthGuardLogin,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果我使用 ng serve 一切都会像预期的那样工作，但是在 ng build --prod 之后，如果我的初始 URL 是 https://my-site:4300/login，我会收到 404 。在这种情况下，RouterModule 设置将被忽略。

如果我输入 https://my-site:4300 ，我将被重定向到 https://my-site:4300/login 并显示登录页面。

有什么想法吗？

========================

2018 年 10 月 31 日更新:

这是 AuthGuardLogin:

import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardLogin implements CanActivate {

  constructor( private router: Router, private authService: AuthService) { }

  canActivate() {
    if (this.authService.isLoggedIn()  === false) {
      return true; }

    this.router.navigate(['/']);
    return false;
  }
}

我现在所做的是在 Kestrel 服务器中托管网站。现在它完美无缺。为什么？我不知道:-)!

顺便说一句，Kestrel 服务器托管在 Windows 服务中。所以我可以使用我们的软件包部署它并通过常规设置进行安装。

致以最诚挚的问候，非常感谢!!!

Answer 1

当刷新出现错误并且无法识别页面时，我在生产环境中遇到了类似的问题。

我通过使用修复它: imports: [RouterModule.forRoot(routes, { 使用哈希:真 })],

我建议这个解决方案，因为你说当你输入默认 url 时它工作并在登录时重定向，但是当你输入/login 时它没有。

使用useHash是因为angular是spa，需要先加载主index.html。在 localhost 和 webpack 中它工作正常，但是当你通过服务器提供你的应用程序时，你需要在刷新时浏览 index.html 以及当你在不使用 Angular 路由器时直接点击 url 时。

您的网址会变得有点难看，因为每个网址前都会添加#。例如 domain/login 将变成 domain/#/login

希望对你有帮助