PathLocationStrategy 仅适用于本地

Question

我有哈希问题，在我构建它时在我的工作项目上，在测试项目上一切正常。我已经在谷歌中阅读了这个问题： Angular2 without hash in the url 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 {
}

app-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 {
}

用户路由.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="/" />

您可以在此处阅读有关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您的服务器将index.html在/var/www/example.com/path/someThing/而不是/var/www/example.com/