PathLocationStrategy 仅适用于本地 [英] PathLocationStrategy works only locally

问题描述

我有哈希问题，在我构建它时在我的工作项目上，在测试项目上一切正常.我已经在谷歌阅读了这个问题:网址中没有哈希值的Angular2https://forum.ionicframework.com/t/url-routing-without-hash/81140但我没有找到答案.当我添加

I have problem with hash, on my working project when I build it, on test project all work correctly. I already read this questions in google: Angular2 without hash in the url https://forum.ionicframework.com/t/url-routing-without-hash/81140 but I didn't find answer. When I add

{provide: LocationStrategy, useClass: HashLocationStrategy}

一切正常，但带有哈希值.当我添加

All work correctly, but with hash. When I add

{provide: LocationStrategy, useClass: PathLocationStrategy}

它仅适用于本地版本.但工作版本不起作用 http://joxi.ru/n2YLOaMijK7Pam我怎样才能删除这个哈希值 http://joxi.ru/RmzBzxDTWbjeQm 它对我的构建项目有什么作用?

It work only on local version. But working version don't work http://joxi.ru/n2YLOaMijK7Pam How can I remove this hash http://joxi.ru/RmzBzxDTWbjeQm what would it work on my build project ?

app.module.ts

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

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

user-routing.module.ts

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

推荐答案

PathLocationStrategy 使用 HTML5 pushState 依赖于 HTML 标签.您需要告诉浏览器将在请求的路径前添加什么前缀.请记住将其添加到您的应用中:

PathLocationStrategy uses HTML5 pushState which depends on the <base> HTML tag. You need to tell the browser what will be prefixed to the requested path. Remember to add it in your app:

<base href="/" />

在这里您可以阅读更多关于Angular 中的路由

Here You can read more about routing in Angular

更重要的事情是将每个 Angular 路由(在服务器端)路由到 index.html 中指定的基本路径.例如，这是在 nodeJS 中完成的:

One more important thing is to route (on the server side) every Angular route to base path specified in index.html. For example, this is how it is done in 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/

Otherwise, when your customer will reach for example www.example.com/path/someThing your server will be looking for index.html file in the /var/www/example.com/path/someThing/ instead of /var/www/example.com/

这篇关于PathLocationStrategy 仅适用于本地的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！