首页 > 解决方案 > 在 aws ec2 ubuntu 16.04 上部署 angular 6 时的路由问题

问题描述

我创建了平均堆栈应用程序并使用 ubuntu 16.04 将其上传到 AWS Ec2 服务器上。现在,当我访问我的链接“ http://xx.xxx.xx.xx:4200 ”时,它可以正常工作并打开“ http://xx.xxx.xx.xx:4200/login ”。但是,当我尝试重新加载或输入“ http://xx.xxx.xx.xx:4200/userhome ”或“ http://xx.xxx.xx.xx:4200/login ”时,它会给我 404 错误。此外,登录后注销不起作用。当我使用“ng serve”时,所有项目都运行良好我已阅读此内容:https ://angular.io/guide/deployment 。我已经在我的文件夹中创建了“.htaccess”文件,但仍然是同样的问题。

我在 StackOverflow 上阅读了许多解决方案,但似乎没有一个对我有用。我想我错过了或没有正确执行某些步骤。我无法设置这个 .htaccess。

请参见下面的 .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

我在 apache.conf 中添加了以下代码

<Directory "/var/www/html">
  Options Indexes FollowSymLinks
  AllowOverride All
  Require all granted
</Directory>

请参阅 app-routing.module.ts

import { NgModule } from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { UserhomeComponent } from './userhome/userhome.component';
import { DriverComponent } from './driver/driver.component';

const routes:Routes = [
  {path:'',redirectTo:'login',pathMatch:'full'},
  {path:'login',component:LoginComponent},
  {path:'register',component:RegisterComponent},
  {path:'userhome',component:UserhomeComponent},
  {path:'driver',component:DriverComponent}
];

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

我使用 'http://xx.xxx.xx.xx:4200/' 作为我的 url 项目放在 'var/www/html'

请在这方面帮助我!谢谢

标签: angularjsamazon-web-services.htaccessamazon-ec2ubuntu-16.04

解决方案


您需要配置所有不是文件或目录的东西,都将被重定向到主 index.html 文件......然后角路由将完成剩下的工作

如果您使用 apache 添加 .htaccess 文件和那些行,

如果您使用 nginx,那么您需要通过 SSH 登录到服务器并更新 nginx conig

在路径:/etc/ngins/sites-enabled/{THE_CONFIG_FILE}

不要忘记重启nginx服务

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html [L,R]

推荐阅读