title: Angular 4 Internationalization and Routing
body: <p>I'm working on a project for work that is using angular 4's native routing and i18n internationalization. The problem that I'm encountering is when the user switches languages while on a route that is not the primary route. This part of the application is accessed like <code>foo.com/admin/</code> and when we throw a language in there, the app reloads to <code>foo.com/admin/es/</code>. If this is done from a route such as <code>foo.com/admin/settings</code> the problem is the application will reload to the language but the result would be a message <code>Cannot get admin/es/settings</code>.</p>
  
  <p>The only way this can be avoided is for the user to change language on the main route. I understand the changes of this happening are probably minimal but I feel that we are not using routes correctly as I have been pushing for a better structure to our routes utilizing child routes. I'm very familiar with child routes in AngularJS and ui.router.</p>
  
  <p>So I'm really down to a two-part question:
  1. How can our routing and internationalization work together?
  2. How do we achieve a better structure for our routes?
    a. Would ui.router for Angular 2 be a better option? (I'm really pushing for this but I've not yet tried ui.router and angular-cli)</p>
  
  <p>Current Route Mapping:</p>
  
  <ul>
  <li>foo.com/admin
  
  <ul>
  <li>/user</li>
  <li>/invite</li>
  <li>/settings</li>
  <li>/publications-added</li>
  <li>/publications-cited</li>
  <li>/publications-read</li>
  <li>/publications-viewed</li>
  <li>/library-views</li>
  </ul></li>
  </ul>
  
  <p>Desired Rout Mapping:</p>
  
  <ul>
  <li>fo.com/admin
  
  <ul>
  <li>/user
  
  <ul>
  <li>/invite</li>
  </ul></li>
  <li>/settings</li>
  <li>/analytics
  
  <ul>
  <li>/publications-added</li>
  <li>/publications-cited</li>
  <li>/publications-read</li>
  <li>/publications-viewed</li>
  <li>/library-views</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>Routing:
  <code>
       {
          path: '',
          component: BaseComponent,
          resolve: {
            user: UserService
          },
          children: [
            {
              path: '',
              component: AdminUserComponent,
              canActivate: [AdminUserGuard]
            },
            {
              path: 'invite',
              component: AdminInviteComponent,
              canActivate: [AdminUserGuard]
            },
            {
              path: 'settings',
              component: AdminSettingsComponent,
              canActivate: [AdminUserGuard]
            },
            {
              path: 'publications-added',
              component: AdminAnalyticsComponent,
              canActivate: [AdminUserGuard]
            },
            {
              path: 'publications-cited',
              component: AdminAnalyticsComponent,
              canActivate: [AdminUserGuard]
            },
            {
              path: 'publications-read',
              component: AdminAnalyticsComponent,
              canActivate: [AdminUserGuard]
            },
            {
              path: 'publications-viewed',
              component: AdminAnalyticsComponent,
              canActivate: [AdminUserGuard]
            },
            {
              path: 'library-views',
              component: AdminAnalyticsComponent,
              canActivate: [AdminUserGuard]
            },
            {
              path: 'analytics',
              redirectTo: 'publications-added',
              pathMatch: 'full'
            }
          ]
        }
  </code></p>