时间戳

首页 > 解决方案 > Angular 11 在直接点击 url 而不是通过应用程序导航时抛出 404 错误

angular - Angular 11 在直接点击 url 而不是通过应用程序导航时抛出 404 错误

问题描述

我正在尝试学习 Angular，并且我创建了一个简单的 Web 应用程序。我使用构建应用程序

ng build --prod

并将其部署在tomcat服务器中。

每当我尝试直接点击除主 URL 以外的任何 URL 时，应用程序都会出现 404 错误。（应用程序完全是前端，不涉及后端）

主页 url - http://54.160.203.76:8080/passgen/ - 这加载得很好。

其他网址 - http://54.160.203.76:8080/passgen/feedback - 这会产生 404 错误。

//routes array

const routes: Routes = [
  { path: '', component: PassgenComponent },
  { path: 'passphrase', component: PassphraseComponent },
  { path: 'strength', component: PassStrengthComponent },
  { path: 'feedback', component: FeedbackComponent },
  { path: '**', redirectTo: '' },
];


// code snippet to use the routes

 <div class="nav-links">
    <div routerLink="" (click)="navSlide()">Password</div>
    <div routerLink="strength" (click)="navSlide()">PassStrength</div>
    <div routerLink="passphrase" (click)="navSlide()">Passphrase</div>
    <div routerLink="feedback" (click)="navSlide()">Feedback</div>
  </div>


//index html base href

 <base href="./"/>

在此处输入图像描述

标签： angular

解决方案

您必须配置您的 tomcat 以在每次路由更改时请求 index.html。

为此，在 /opt/tomcat/latest/conf/context.xml 中添加 RewriteValve（路径可能会或可能不会在您的情况下有所不同）。

在您的项目文件夹中，创建WEB-INF文件夹，然后在 WEB-INF 中添加一个文件rewrite.config，其内容如下：-

RewriteCond %{REQUEST_URI} !^.*\.(bmp|css|gif|htc|html?|ico|jpe?g|js|pdf|png|swf|txt|xml|svg|eot|woff|woff2|ttf|map)$
RewriteRule ^(.*)$ /index.html [L]

在此之后，重新启动您的 tomcat 服务器。

推荐阅读