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

用户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为例时，您的服务器将在index.html而非/var/www/example.com/path/someThing/

中查找/var/www/example.com/个文件

Answer 2

你是对的，我的问题是托管https://www.beget.com/ru，我找到了这个解决方案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>

现在它起作用了。谢谢你的帮助！

Answer 3

在您的路由中

添加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。

PathLocationStrategy仅在本地工作

3 个答案: