Apache服务器上无重写规则的Angular应用程序_Angular_Apache_.htaccess_Mod Rewrite

Apache服务器上无重写规则的Angular应用程序

angular apache .htaccess mod-rewrite

Apache服务器上无重写规则的Angular应用程序,angular,apache,.htaccess,mod-rewrite,Angular,Apache,.htaccess,Mod Rewrite,我需要向外部团队交付一个角度应用程序。当他们试图直接加载一个页面时，他们会得到一个404NotFound错误。服务器是Apache，我无法访问此服务器我曾要求他们根据文档（重写规则）配置服务器：但他们拒绝这样做。我别无选择。我需要运行Angular应用程序，或者直接使用html和js完全重做应用程序我需要一个机制，总是加载index.html并重定向到目标页面这是build命令： ng build --prod --base-href=./ 我还尝试将重写规则附加到与index.html

我需要向外部团队交付一个角度应用程序。当他们试图直接加载一个页面时，他们会得到一个404NotFound错误。服务器是Apache，我无法访问此服务器

我曾要求他们根据文档（重写规则）配置服务器：但他们拒绝这样做。我别无选择。我需要运行Angular应用程序，或者直接使用html和js完全重做应用程序

我需要一个机制，总是加载index.html并重定向到目标页面

这是build命令：

ng build --prod --base-href=./

我还尝试将重写规则附加到与index.html相同的文件夹中的.htaccess中，但对它们也不起作用，可能是因为它们没有启用mod_rewrite:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>


重新启动发动机
重写基/
重写规则^index\.html$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写规则/index.html[L]

我不喜欢我找到的解决方案，但这是我唯一实现的解决方案。它很麻烦，维护起来很困难，不应该在大型应用中使用。在我的例子中，维护不是问题，应用程序在未来实际上不会增长

理想情况下，服务器应该配置重写规则，以避免所有这些额外的代码

首先：所有URL必须加载index.html。为此，我创建了一个静态文件，如

onepage.html

，

otherpage.html

，等等。如果我有更深的路径，我需要创建像

users\userspage.html

这样的文件夹。“我的文件夹”的结构如下所示：

\src
    \index.html
    \onepage.html
    \otherpage.html
    \users
        \userspage.html
    ...

然后我编辑了这些文件，从其文件夹重定向到index.html。对于

onepage.html

，

otherpage.html

：

<!doctype html>
<html></html>
<script>
    window.location.href = './index.html';
</script>

Second：我需要在没有匹配项时加载组件（

MenuComponent

）。为此，我以以下方式配置app-routing.module.ts文件：

const routes: Routes = [
  { path: 'onepage.html', component: OneComponent },
  { path: 'otherpage.html', component: OtherComponent },
  { path: 'users/userspage.html', component: UsersComponent },
  // ...
  { path: '**', component: MenuComponent }
];

Third：我已将所有URL作为RouterLink添加到

MenuComponent.html

中：

<a id="onepage" routerLink="/onepage.html" [queryParams]="oneParams"></a>
<a id="otherpage" routerLink="/otherpage.html" [queryParams]="otherParams"></a>
...
<a id="users-userspage" routerLink="/users/usersPage.html" [queryParams]="usersParams"></a>

我对Angular很陌生，我相信它可以做得更好，尤其是参数到属性的映射。我希望没有人被迫使用这种方法。