Angular5 - routing redirect issue

Question

I want the following routes to work:

• /settings/general
• /settings/changePassword
• /settings/changeEmail

My issue is that settings/ works also. When the user puts /settings into the address bar I want it to redirect to: "/settings/general"

This is my parent route:

    {
      path: 'settings',
      loadChildren: '@application/user#UserModule'
    }

This is my child routes in a child module

RouterModule.forChild([
      {
        path: '',
        component: LayoutComponent,
        children: [
          {
            path: 'changePassword',
            component: PasswordComponent
          },
          {
            path: 'changeEmail',
            component: EmailComponent
          },
          {
            path: 'general',
            component: GeneralComponent
          }
        ]
      }
    ])

Answer 1

Just add a redirect for the '/' route.

RouterModule.forChild([
      {
        path: '',
        component: LayoutComponent,
        children: [
          {
            path: '',
            redirectTo: 'general',
            pathMatch: 'full',
          },
          {
            path: 'changePassword',
            component: PasswordComponent
          },
          {
            path: 'changeEmail',
            component: EmailComponent
          },
          {
            path: 'general',
            component: GeneralComponent
          }
        ]
      }
    ])