# Setting up basic routing
## Specify base href in index.html:
```markup
```
Add a `` tag in the `` section of index.html as below:
```markup
Momentz4everLoading...
```
## Setting up Basic Routes Array:
```javascript
...
import { Route, RouterModule } from '@angular/router';
...
const ROUTES: Route[] = [
{ path: '', component: LoginComponent},
{ path: 'home', component: HomeComponent},
{
path: 'albums',
component: UserAlbumsComponent
},
{
path: 'albums/:id',
children: [
{ path: '', component: AlbumDetailsComponent },
{ path: '/photos', component: AlbumPhotosComponent },
{ path: '/photos/:id', component: PhotoDetailsComponent },
]
}
];
@NgModule({
declarations: [
...
],
imports: [
...
RouterModule.forRoot(ROUTES)
],
providers: [
...
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Above, we imported `Route` and `RouterModule` from `@angular\router`.
Next, we set a const ROUTES of type `Route[]` , an array of type `Route`
Note the setting up of `children` routes for the path `albums/:id`.
Finally, in the AppModule's metadata in `@NgModule` decorator, we specify below inside `imports` array:
```typescript
RouterModule.forRoot(ROUTES)
```
### ``
Based on the current route in the browser, Angular would display the contents of the component as per routes-component configuration above, inside the `` tags.
\`