Angular 2 Router Module function gives error "Argument type ... is not assignable to parameter type Routes"

Question

I was creating an Angular 2 App with some simple routing:

(main.module.ts)

import { routes } from './main.routes';
/* Other imports */
@NgModule({
    imports: [
        HomeModule,
        TestModule,
        RouterModule.forRoot(routes) // imported from file below
    ],
    declarations: [MainComponent, SidebarComponent],
    exports: [MainComponent, SidebarComponent]
})

(main.routes.ts)

import { Route } from '@angular/router';
/* Other imports */
export const routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            { path: 'home', component: HomeComponent },
            { path: 'test', component: TestComponent }
        ]
    }
];

The application runs fine when I type npm start but my IntelliJ IDE is showing error in the line with RouterModule.forRoot(routes)

Argument type {path: string, component: MainComponent, children: {path: string, component: HomeComponent}|{path: string, component: TestComponent}[]}[] is not assignable to parameter Routes

I've also tried:

export const routes: Routes = ] instead of export const routes = [

After searching, I'm unable to find a reason or an alternative to implement it without error.

when you use export const routes: Routes, if you double-click on the type Routes, it should take you to the type definition. What does the definition look like, and which file is it in? — BeetleJuice

Pedro Lourenço Pedro Lourenço · Accepted Answer · 2016-10-23T05:21:49

Solved it by using:

export const routes: Routes = [
   { path: '', component: <any>MainComponent },
   { path: '', component: <any>MainComponent }
];

I found it by looking through the definition of Route[]. Ended up finding out the conflict was only in component: MainComponent. Happens that the interface Route is expecting it to be component?: Type<any>;. At the begging I though it wasn't a Type problem (not duplicate). But, I concluded it was expected to extend Type.

Credits: here and thanks to @BeetleJuice

Angular 2 Router Module function gives error "Argument type ... is not assignable to parameter type Routes"

I've also tried:

1 Answers