Why my Angular 5 application not work with deep linking?

Question

I'm developing one Angular 5 application deployed on Azure App Service. My problem is that when I try to access with a direct link my application redirect me to home page.

These are my application routes:

// Imports
@NgModule({
  declarations: [
    // declaratins
  ],
  imports: [
    // modules
    RouterModule.forRoot([
    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
    { path: 'search', component: SearchComponent, canActivate: [AuthGuard] },
    { path: '', redirectTo: 'home', pathMatch: 'full', canActivate: [AuthGuard] }
]),
    // modues
  ],
  providers: [
    // Imports
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I've followed the deployment angular's instruction changing the web.config with following:

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular 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="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

When I navigate inside application I can view the URL change correctly but if I try navigate directly a link like https://host/search I will redirect to https://host/home.

How can I resolve this problem? Thanks

score 2 · Answer 1 · answered May 16 '18 at 14:42

2

I think the issue is the action rewrites to /index.html where it should rewrite to just /.

You can take a look at the web config here: Web.config for hosting an Angular application on Azure Web App

answered May 16 '18 at 14:42

Martin Brandl

56,134
13
133
172

Ahh, sorry for the late response. Glad that you solved it! – Martin Brandl May 17 '18 at 09:44

score 2 · Answer 2 · answered May 17 '18 at 09:16

2

Ciao,

I've found the problem. @Martin Brandl answer is correct and useful but in my case the problem was that inside my app.component there was inside the onOnInit one redirect to Home Page.

ngOnInit() {
    this.router.navigate(['home']);
}

Thanks

answered May 17 '18 at 09:16

ilMattion

1,841
2
24
47

Why my Angular 5 application not work with deep linking?

2 Answers2