CODEWITHSUNDEEP
angular
user9750993
user9750993

Reputation: 23

There are no common properties with the "Route" type

Const routes highlights in red and outputs the following error:

Type "({path: string; component: Route [];} | {path: string;
component: Route []; canActivate: (typeof ..." can not be assigned for
type "Route []".

Type "{path: string; component: Route [];} | {path: string; component:
Route []; canActivate: (typeof ..." can not be assigned to the "Route"
type.

The "{path: string; component: Route [];}" type can not be assigned to
the "Route" type.

The property types of the "component" are incompatible.

The "Route []" type can not be assigned for type "type <any>".


The "apply" property is not present in the type "Route []".

and so on...

How can I fix this?

import { Routes } from '@angular/router';

import { SignInRoutes } from '../layout/sign-in/index';
import { LayoutRoutes } from '../layout/index';

import { SignInComponent } from '../layout/sign-in/sign-in.component';

import { AuthGuard } from '../shared/guards/auth.guard';

export const routes: Routes = [

{ path: 'sign_in',   component: SignInRoutes },
{ path: 'layout',   component: LayoutRoutes, canActivate: [AuthGuard] },
{ path: '**', component: SignInComponent }

];

Upvotes: 2

Views: 2520

Answers (3)

manish pamnani
manish pamnani

Reputation: 195

I got a similar problem few days back while including routes for my help module. I was putting [] in two places like this:

const routes : Routes = [
  {
    path : 'help', component : HelpComponent
  }
];

and

RouterModule.forRoot([routes])

which means I was converting routes array to array again.

But when I removed the [] (square brackets) from RouterModule.forRoot then it worked as expected.

Upvotes: 3

Divneet
Divneet

Reputation: 718

I have enclosed an example. 

const recipesRoutes : Routes = [
    { path: 'recipes', component: RecipesComponent, children: [
    { path: '', component: RecipeStartComponent },
    { path: 'new', component: RecipeEditComponent, canActivate: [AuthGuard] },
    { path: ':id', component: RecipeDetailComponent },
    { path: ':id/edit', component: RecipeEditComponent, canActivate: [AuthGuard] },
  ] },
];

Hope this helps!!

Upvotes: 0

Abinesh Devadas
Abinesh Devadas

Reputation: 1547

It Looks like you are assigning Routes to component property which is not allowed. If you are trying to achieve nested routes then you should use children property. Please refer the tutorial for more info

Upvotes: 0

Related Questions