使用URL访问时出现角度错误500

Question

I'm setting up an Angular web application with routing : https://wei.insa-cvl.org

When I use the links inside this application, I can open the different pages. For example, clicking on the "Mot de passe oublié ?" link brings me to the good page : https://wei.insa-cvl.org/auth/forgot-password . However, when I try to access this page through the URL , I get an internal server error.

I think the problem comes from the .htacess file, but even if I remove it, I'm always getting this error.

The .htaccess file ( source :

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]

    RewriteRule ^ /index.html
</IfModule>

The routing :

{path: '', component: ApplicationComponent, canActivate: [AuthGuardService]},
{path: 'auth', component: AuthComponent},
{path: 'auth/forgot-password', component: ForgotPasswordComponent}
...
{path: '**', redirectTo: '/auth', pathMatch: 'full'}

I would like to access the pages through the URL and not only by clicking on the 'in-app links'. Is it possible ?

EDIT : Hurray I finally found a solution ! I had to add {useHash: true} to my app-routing.module.ts and using the hash URL, like this one : https://wei.insa-cvl.org/#/policy But I don't understand, why ??

Answer 1

Hurray I finally found a solution ! I had to add {useHash: true} to my app-routing.module.ts and using the hash URL, like this one : https://wei.insa-cvl.org/#/policy But I don't understand, why ??

This is because the hash and what comes after is not sent to the server. In your case, it works because Angular place the hash strategically right after the hostname, this way, when the user change the URL manually, the browser will take only the domain name and use it in the request which your webserver will receive, and since no file was specified, will reply with the default file associated, usually the index.html .

Even though this approach is valid and works in most cases, you can deal with this situation differently, like you were trying to. In your webserver, on every 404 request (meaning your webserver don't know the route), you can reply with a 200 and the index.html and let the Angular app deal with the routing internally or if you are using the webserver only for the Angular app, you can always return the index.html file.

I'm assuming you are using Apache as your webserver, check this StackOverflow for more help with that.

Adding this configuration to the webserver allows you to use Angular Universal which allows you to render your templates from the server making the loading of the page faster.

Answer 2

When you request the URL

https://wei.insa-cvl.org/#/policy

you are actually requesting the following URL:

https://wei.insa-cvl.org/index.html#/policy

See the index.html file ?

Since index.html is the file hosting your Angular app, your Angular code is executed and Angular can process the hashtag fragment of the URL: #/policy . Everything works!

If you DO NOT use the hashtag and request https://wei.insa-cvl.org/policy directly, your server tries to locate a file or folder named policy but it doesn't exist and the request fails (error 500).

The solution is to configure your server to redirect ALL REQUESTS to the index.html file , so that your Angular app can be executed.

It looks like you are using Apache. I found the following code to redirect all requests to index.html (source: https://serverfault.com/a/188411 ):

RewriteEngine on
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteRule . /index.html [R=302,L]