PathLocationStrategy works only locally

Question

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}

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

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

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

Answer 1

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="/" />

Here You can read more about routing in Angular

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});
});

or 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>

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/

Answer 2

You was right, my problem was with hosting https://www.beget.com/ru, I found this solution https://geekbrains.ru/topics/3055 and i should add in my file .htaccess this code:

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

And now it work. Thanks for your help !

Answer 3

in your routing add pathMatch like this:

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'
            }
          ]
        }
      ];

notice that the parent pathMatch is set to prefix.