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 ur

Answer 1

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 2

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