title: Passing type-safe route data to routes in angular 2
body: <p>In my routing module I am passing data in this fashion. </p>
  
  <pre><code>const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent, data: { ShowTopBar: true, showSideBar: false} },
    { path: 'error', component: ErrorComponent, data: { ShowTopBar: true, showSideBar: false}}
  
  ];
  export const AppRoutingModule: ModuleWithProviders = RouterModule.forRoot(routes);
  </code></pre>
  
  <p>In order to make the data type safe I have created a <code>RouteData</code> class which would hold the <code>ShowTopBar</code> and <code>ShowSideBar</code> values and initialize them through a constructor.</p>
  
  <pre><code>export class RouteData {
  constructor(showTopbar: boolean, showSideBar: boolean) {
    this.ShowSideBar = showSideBar;
    this.ShowTopBar = showTopbar;
  }
   public ShowTopBar: boolean;
   public ShowSideBar: boolean;
  }
  </code></pre>
  
  <p>Now, I have changed the declarations for Routes in the following manner:</p>
  
  <pre><code>const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent, data: new RouteData(false, false) },
    { path: 'error', component: ErrorComponent, data: new RouteData(true, false)}
  
  ];
  </code></pre>
  
  <p>which is giving the following error on compiling:</p>
  
  <blockquote>
    <p>Error encountered resolving symbol values statically. Calling function
    'RouteData', function calls are not supported. Consider replacing the
    function or la mbda with a reference to an exported function,
    resolving symbol AppRoutingModule</p>
  </blockquote>
  
  <p>My Question is how can we pass <code>RouteData</code> in a type-safe way to Routes so that I can take advantage of type-safety. </p>