Angular routing - redirect url to component

Question

I have a problem with redirect my app in production mode. when I have url http://server.com/projectname/dashboard, server response IIS error page 404. I must open app using http://server.com/projectname and then click on link for example:

<a [routerLink]="'dashboard'">Dashboard</a>

In html i have <base href="./"> and this is my router:

const appRoutes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full', canActivate: [AuthGuard] },
    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard]},
    { path: '400', component: ErrorComponent, canActivate: [AuthGuard] },
    { path: '401', component: ErrorComponent, canActivate: [AuthGuard] },
    { path: '404', component: ErrorComponent, canActivate: [AuthGuard], 
    { path: '**', redirectTo: '/404' }
]

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ]
})

In development mode I have url http://localhost:4200/dashboard and i should redirect. Can it be problem when in developing is url localhost:4200/dashboard and in production is server.com/appname/dashboard?

Zze · Accepted Answer · 2017-11-29 08:48:36Z

1

You need to update the base href for your application. I would not recommend @Daniel's answer if you are using angular-cli, as there is a much easier approach.

With angular-cli, you can use: ng build --prod --bh /appname/ and this will updated the production builds base href. This is a far better approach as you do not have to update this manually in the index.html when switching between environments.

Set base href dynamically - Angular 2 / 4

answered Nov 29, 2017 at 8:48

Zze

18.9k14 gold badges95 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Segura Pérez · Accepted Answer · 2017-11-29 08:37:50Z

0

Add this line on your index.html when you deploy on production:

<base href="/appname/">

answered Nov 29, 2017 at 8:37

Daniel Segura Pérez

1,1278 silver badges12 bronze badges

Comments

bluray · Accepted Answer · 2017-11-29 08:49:07Z

0

I found the cause. I must configuration fallback. Here is article about it.

I had to add web.config:

<?xml version="1.0" encoding="utf-8"?>
<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="./" />
      </rule>
    </rules>
  </rewrite>
  </system.webServer>
</configuration>

Now it works correctly and i can open arbitrary app url.

answered Nov 29, 2017 at 8:49

bluray

1,9736 gold badges40 silver badges74 bronze badges

Collectives™ on Stack Overflow

Angular routing - redirect url to component

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related