Cannot find name @Routes

angular angular2-routing

18,912

This is no longer how you create routes. Now you need to use the RouterModule, and configure it with the routes. Routes is still a thing, but it is not used as a decorator. It is the type that should be passed to RouterModule.forRoot(Routes). So we would do something like

import { RouterModule, Routes } from '@angular/router'

const routes: Routes = [
  { path: '', component: HomeBodyComponent, outlet: 'body' },
  { path: '', component: HomeCssComponent, outlet: 'css' },
  { path: '', component: HomeHeaderComponent, outlet: 'header' },
  { path: '', component: HomeContentComponent },
  { path: '', component: HomeFooterComponent, outlet: 'footer' },
  { path: '', component: HomeScriptsComponent, outlet: 'scripts' }
]

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  bootstrap: [ AppComponent ]
})
class AppModule {}

Here, we need to import the RouterModule into the AppModule, calling its forRoot method, passing in the Routes. If the routing is in a different file, which it commonly is, then you could do something like

app.routing.ts

const routes: Routes = [...]

export const appRouting = RouterModule.forRoot(routes);

app.module.ts

import { appRouting } from './app.routing'

@NgModule({
  imports: [ appRouting ]
})
class AppModule {}

See also:

Routing & Navigation

18,912

Author by

Josh

A man, when confronted with a problem, said "I know! I'll use regular expressions!" Now he has two problems.

Updated on June 26, 2022

Comments

Josh almost 2 years

I'm making a layout object that has several children and I want the parent object to declare the routing for all the child objects - preferably not in my app.module.ts.

Here is my markup for my HomeLayoutComponent

<router-outlet name="body"></router-outlet>
<router-outlet name="css"></router-outlet>
<router-outlet name="header"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="footer"></router-outlet>
<router-outlet name="scripts"></router-outlet>

There's a bit going on here, but I have to swap the pieces out because I have 3 different templates for various pages including different css, different scripts, and even different attributes on the <body> tag.

now the typescript for the HomeLayoutComponent

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

import { HomeBodyComponent } from './home-body.component';
import { HomeCssComponent } from './home-css.component';
import { HomeHeaderComponent } from './home-header.component';
import { HomeContentComponent } from './home-content.component';
import { HomeFooterComponent } from './home-footer.component';
import { HomeScriptsComponent } from './home-scripts.component';

@Component({
    selector: 'home-layout',
    template: require('./home-layout.component.html')
})
@Routes([
        { path: '', component: HomeBodyComponent, outlet: 'body' },
        { path: '', component: HomeCssComponent, outlet: 'css' },
        { path: '', component: HomeHeaderComponent, outlet: 'header' },
        { path: '', component: HomeContentComponent },
        { path: '', component: HomeFooterComponent, outlet: 'footer' },
        { path: '', component: HomeScriptsComponent, outlet: 'scripts' }
])
export class HomeLayoutComponent {

}

My problem is that @Routes is erroring with this error message:

error TS2304: Cannot find name 'Routes'.

Maybe I'm doing this all wrong and I need to put the routes in the app.module. I wanted to avoid so many routes in that one file.

According to Difference between router and router-deprecated in angular2, I should be using Routes and not the RouterConfig that I am seeing on virtually every other google result.

Josh over 7 years

Bummer. I was hoping I wouldn't have to declare all my routes in the app.module.ts. I suppose with your file layout I could split them off into a routes file, but then I still have to declare all my components. Not ideal, considering angular 1 didn't require you to "register" your controllers and directives in order to use them.