Angular 4 Email link

Issue

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.

Solution

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!

Answered By – Chirag

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.