'Angular 2 New Router - Routes not displaying in <router-outlet></router-outlet>
Pretty new to Angular 2 and not fully up to speed on the new Router. I've followed the example from the Angular Documentation, and while I'm not getting errors, my components aren't displaying in the tag.
Here's the router code:
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from './home.component';
import {FeaturesComponent} from './features.component';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },,
{ path: 'features', component: FeaturesComponent },
{ path: '**', component: HomeComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(appRoutes);
Add here's the app.module.ts code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { routing,
appRoutingProviders } from './app.routing';
import {HomeComponent} from './home.component';
import {FeaturesComponent} from './features.component';
@NgModule({
imports: [ BrowserModule, routing ],
declarations: [ AppComponent, HomeComponent, FeaturesComponent ],
providers: [appRoutingProviders],
bootstrap: [ AppComponent ]
},
)
export class AppModule { }
And I have the routeroutlet tag within the app.component.html as such
<div class="container">
<router-outlet></router-outlet>
</div>
Is there anything I'm missing here? I'm under the impression that my home.component.ts should display in the router outlet tag on load of the page which it's not doing. Any guidance would be much appreciated. Thanks.
Solution 1:[1]
I solved this issue by redoing routing.ts and module.ts following these new guidelines https://angular.io/docs/ts/latest/guide/router.html. I'm not sure what the issue was exactly, might have been the double comma in the appRoutes constant.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | maximus |
