1

I have Angular 4 app and I send reset password link to my email when user provides email and click on Forgot Password. When user click on the link from email, it should go straight to ResetPassword or Login screen. However, when I click on link from email it gives me 404 error instead of taking the user to specified page (i.e. www.mywebsite.com/ResetPassword?token=token123).

enter image description here

I have already defined routes for ResetPassword etc.

 { path: 'ResetPassword', component: ResetPasswordComponent }

Do I need to configure anything specific in angular 4 apps so that it can go straight to ResetPassword page, when click on link from email? Why is it giving me 404 error?

Thanks in advance.

Chirag
  • 1,683
  • 2
  • 17
  • 26

3 Answers3

0

You need to configure your web server to return the index.html file when it can't find the resource being requested so that then Angular can load and take over to get that route. If you are unable to configure that, then you will need to configure Angular to use the HashLocationStrategy for URLs. This creates URLs that look like this instead: www.mywebsite.com/#/login.

Daniel W Strimpel
  • 8,190
  • 2
  • 28
  • 38
  • Thanks Daniel! What do we need to configure on web server? Is there any particular settings in web.config? Fyi, My solution above works locally (localhost url) but doesn’t work on web hosting server. It gives me server level 404 error. – Chirag Apr 21 '18 at 11:41
0

Below 2 steps resolved my issue, hope it helps someone:

1) I just noticed that the routes for ResetPassword that I defined was after the '**' (404 - not found).

So, whenever it tries to find ResetPassword, it finds 404 not found prior to ResetPassword.

When I changed my routing module to have ResetPassword defined prior to '**', I was able to open ResetPassword page straight from Email link.

{ path: 'ResetPassword', component: ResetPasswordComponent }, // Define this one first prior to ** - 404 not found
{ path: '**', component: PageNotFoundComponent } // otherwise redirect to 404-Page Not Found

Previous code:

{ path: '**', component: PageNotFoundComponent }
{ path: 'ResetPassword', component: ResetPasswordComponent }, // Never reached here as I got 404 prior to reaching this route

However, this only worked on localhost. When I deployed my code to hosting server, it needed below step#2 to make it work.

2) On hosting server, I had to update web.config file with below settings to redirect all routes to root or index.html.

    <system.webServer>
    <rewrite>
        <rules>
            <clear />
            <rule name="Redirect to https" stopProcessing="true">
                <match url="(.*)" />
                <conditions>
                    <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                </conditions>
                <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
            </rule>
            <rule name="AngularJS Routes" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>

Thanks to @guilherme-teubl for details on below post for web.config settings:

angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable

Thanks Danial for your response!

Chirag
  • 1,683
  • 2
  • 17
  • 26
0

If you are using Apache, add a .htaccess file with the following inside it:

RewriteEngine on
RewriteBase    /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . index.html [NC,L]

Solves the problem.

Kye
  • 4,279
  • 3
  • 21
  • 49
Plaganomics
  • 21
  • 4