生产中的角度重定向网址答案

【问题标题】：Angular redirect url in production生产中的角度重定向网址
【发布时间】：2021-10-16 16:09:53
【问题描述】：

当我在生产环境中提供我的应用程序时遇到问题。路由不起作用生成 404 错误我需要在我的项目中进行哪些更改才能在此环境中使用这些路线？

我的本地：http://localhost:4200/test

生产：http://my-app/test

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TestComponent } from './tests/test.component';
import { SideNavComponent } from './side-nav/side-nav.component';

const routes: Routes = [
  { path: 'test', component: TestComponent },
];

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

网址：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <base href="/" />
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=0, minimal-ui"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <!-- Favicon icon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  </head>
  <body class="mat-typography">
    <app-root></app-root>
  </body>
</html>

【问题讨论】：

标签： angular

【解决方案1】：

我认为您必须使用HashLocationStrategy 进行路由。检查这个： https://angular.io/api/common/HashLocationStrategy

【讨论】：

【解决方案2】：

存在作为布尔标志的路由配置选项。选项名称为useHash。默认情况下，它是 false，您需要将其设为 true 才能使用哈希加载路由。 app-routing.module.ts中要进行的更改

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash:true })

现在，如果您仍然希望您的路由没有散列，那么您需要修改您的服务器设置。以下是要在 apache2 上完成的设置。按照下面的链接。

https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

【讨论】：

不工作。发现错误 404 页面注释：my-app/test