PathLocationStrategy 仅在本地有效

Question

我的散列有问题，在我构建它时在我的工作项目上，在测试项目上都工作正常。我已经在 google 中阅读了这个问题： https://forum.ionicframework.com/t/url-routing-without-hash/81140 但我没有找到答案。当我添加

{provide: LocationStrategy, useClass: HashLocationStrategy}

所有工作正常，但有散列。当我添加

{provide: LocationStrategy, useClass: PathLocationStrategy}

它只适用于本地版本。但是工作版本不工作 http://joxi.ru/n2YLOaMijK7Pam 我怎样才能删除这个散列 http://joxi.ru/RmzBzxDTWbjeQm 它对我的构建项目有什么作用？

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {MaterialModule} from '../shared/mat.module';
import {UserModule} from './user/user.module';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppRoutingModule} from './app-routing.module';
import {ToolbarComponent} from './toolbar/toolbar.component';
import {HashLocationStrategy, LocationStrategy, PathLocationStrategy} from '@angular/common';
import { TestingRComponent } from './testing-r/testing-r.component';

@NgModule({
  declarations: [
    AppComponent,
    ToolbarComponent,
    TestingRComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    UserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
  bootstrap: [AppComponent]
})
export class AppModule {
}

应用-routing.module.ts

   import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import {UserComponent} from './user/user.component';
import {TestingRComponent} from './testing-r/testing-r.component';

const routes: Route[] = [
  {path: '', redirectTo: '', pathMatch: 'full'},
  {
    path: 'auth',
    component: UserComponent
  },
  {
    path: 'testing',
    component: TestingRComponent
  }
];

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

用户-routing.module.ts

  import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import {RegistrationComponent} from './registration/registration.component';
import {UserComponent} from './user.component';
import {LoginComponent} from './login/login.component';
import {TestingComponent} from './dynamic-fields/testing/testing.component';

const routes: Route[] = [
  {
    path: 'auth', component: UserComponent,
    children: [
      {
        path: 'registration',
        component: RegistrationComponent
      },
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'testing',
        component: TestingComponent
      }
    ]
  }
];

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

Answer 1

PathLocationStrategy 使用 HTML5 pushState 这取决于 <base> HTML 标签。您需要告诉浏览器什么将作为请求路径的前缀。记得在你的应用中添加它：

<base href="/" />

在这里你可以阅读更多关于routing in Angular

一件更重要的事情是将每个 Angular 路由（ 在服务器端 ）路由到 index.html 中指定的基本路径。例如，这是在 nodeJS:

中完成的

app.get('/*', (req, res) => {
    res.render('index', {req, res});
});

或Apache:

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

否则，当您的客户到达 www.example.com/path/someThing 时，您的服务器将在 /var/www/example.com/path/someThing/ 而不是 /var/www/example.com/

中查找 index.html 文件

Answer 2

在您的路由中添加 pathMatch，如下所示：

const routes: Route[] = [
        {
          path: 'auth', 
          component: UserComponent,
          pathMatch : 'prefix',
          children: [
            {
              path: 'registration',
              component: RegistrationComponent,
              pathMatch : 'full'
            },
            {
              path: 'login',
              component: LoginComponent
              pathMatch : 'full'
            },
            {
              path: 'testing',
              component: TestingComponent
              pathMatch : 'full'
            }
          ]
        }
      ];

请注意父级 pathMatch 设置为 prefix。

Answer 3

你是对的，我的问题是托管 https://www.beget.com/ru, I found this solution https://geekbrains.ru/topics/3055，我应该在我的文件中添加 .htaccess 这段代码：

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

现在可以了。感谢您的帮助！

PathLocationStrategy 仅在本地有效

PathLocationStrategy works only locally

typescript

angular-routing

angular