I'm having trouble making some window size detection logic work in the routing file of my angular project. I'm using Angular 4, and when I write some basic logic to detect the document size (which tells me the size of the HTML page) everything works. But when I try to action this in the form of placing a variable in the path route, i keep getting error "TS:2322 - Type '{ routingTest: Route; }' is not assignable to type 'Route'. Object literal may only specify known properties, and 'routingTest' does not exist in type 'Route'."

Now I’m a bit perplexed because I've tried "any", "route" and component types for my variable but all throw this error (surprised by any). I'm trying to detect when we are in mobile width range so I can change the route appropriately to a different component, giving me the ability to have completely different UI's for desktop and mobile.

Here is my code, I get the error on "{ path: '**', component: {{ routingTest }} }" line when declareing the "{{ routingTest }}" Var in the component route

const width  = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log("this is the width (responsive),", width)
var routingTest: Any;
    
    if (width > 764)
    {
      routingTest = Testpage1Component
    }
    else
    { 
      routingTest = Testpage2Component
    }
console.log("routing file test", width , routingTest)

const routes: Routes = [
  { path: 'home', redirectTo: '' },
  { path: 'test1', component: Testpage2Component},
  { path: 'test', component: Testpage3Component},

  { path: '**', component: {{ routingTest }} }
];



@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})



export class AppRoutingModule {}