angular - 启动 Angular 路由会给出 404，直到 Index.html 打开

Question

我有一个托管在 Apache 服务器上的 Angular 应用程序。我有一个 Jboss7 应用程序被重定向到这个应用程序。我正在尝试转到一个 Angular Route，它会在我打开 Index.HTML 之前给出 Not Found。然后我可以成功访问该路线。我有一个 .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

我尝试了不同的 .htaccess 文件

标签： angularapache

Answer 1

有两种方法可以解决这个问题。

方法一：使用哈希。 Apache 服务器将能够识别 URL 段中“#”之后的角度路由，因此它不会去尝试在托管服务器路径中查找 xxx.html。

// app-routing.module.ts

import { ExtraOptions, RouterModule, Routes, PreloadAllModules } from '@angular/router';
import { NgModule } from '@angular/core';
import {
  NbAuthComponent,
  // NbLoginComponent,
  // NbLogoutComponent,
  // NbRegisterComponent,
  // NbRequestPasswordComponent,
  // NbResetPasswordComponent,
} from '@nebular/auth';
import { VfLoginComponent } from './pages/login/login.component';
import { AuthGuard } from './@core/utils/auth-guard.service';

const routes: Routes = [
  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule', canActivate: [AuthGuard] },
  {
    path: 'auth',
    component: AuthComponent,
    children: [
      {
        path: '',
        component: VfLoginComponent,
        resolve: [AuthGuard]
      },
      {
        path: 'login',
        component: VfLoginComponent,
        resolve: [AuthGuard]
      },
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

const config: ExtraOptions = {
  useHash: true,
  preloadingStrategy: PreloadAllModules,
};

@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports: [RouterModule],
})
export class AppRoutingModule {
}

方法二：更新.htaccess。 这是我的首选方法。基本上，它使用 gzip 进行了一些优化（更好的加载性能），并通过路由或 URL 回退到 index.html。更多信息：https ://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml

#REDIRECT ROUTES TO INDEX (fixes broken routes with angular)
RewriteEngine on
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
#ENABLE GZIP COMPRESSION TO IMPROVE PERFORMANCE
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/json
# SET EXPIRE HEADERS TO IMPROVE PERFORMANCE
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 2 days"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/javascript "access plus 2 week"
  ExpiresByType application/x-javascript "access plus 2 week"
  ExpiresByType text/javascript "access plus 2 week"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers