angular router-outlet doen't render anything

Question

I am a beginner in angular.I am following a lecture and doing hands-on.I write the following code following the instructor.But this doen't render anything.Please help

app.module.ts :

@NgModule({
  declarations: [
    AppComponent,
    BsNavbarComponent,
    HomeComponent,
    ProductsComponent,
    ShoppingCartComponent,
    CheckOutComponent,
    OrderSucessfulComponent,
    MyOrdersComponent,
    AdminProductsComponent,
    AdminOrdersComponent
  ],
  imports: [
    BrowserModule,
    RouterOutlet,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireDatabaseModule,

  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
export const appRoutes: Routes = [

  {path:'',component:HomeComponent},
  {path:'products',component:ProductsComponent},
  {path:'shopping-cart',component:ShoppingCartComponent},
  {path:'check-out',component:CheckOutComponent},
  {path:'order-sucessful',component:OrderSucessfulComponent},
  {path:'login',component:LoginComponent},
  {path:'admin/products',component:AdminProductsComponent},
  {path:'admin/orders',component:AdminOrdersComponent}

  ]


  RouterModule.forRoot(appRoutes);

app.component.html:

<bs-navbar></bs-navbar>

<main role="main" class="container">

  <div class="starter-template">
    <router-outlet></router-outlet>

</main>

In your `imports` array, remove `RouterOutlet,` add `RouterModule.forRoot(appRoutes);` and define your routes above the @ngModule decorator — Ploppy, Jul 06 '18 at 11:36

score 0 · Answer 1 · answered Jul 06 '18 at 11:40

0

In your imports please remove RouterOutlet and add RouterModule like this

  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireDatabaseModule,
  ]

answered Jul 06 '18 at 11:40

Sreekar Sree

404
5
14

I did and the result is same – Mohammed Ajmal Jul 06 '18 at 11:43
Can you please post your code in stackblitz so that I can take a look into it whats wrong – Sreekar Sree Jul 06 '18 at 11:50
I it possible to copy and paste my entire project in stackblitz ? – Mohammed Ajmal Jul 06 '18 at 11:53
I guess there was problem with your copy pasting there are two src folders please correct it and upload it again and NgModule doesn't look like it is in the post – Sreekar Sree Jul 06 '18 at 12:08
Error: Template parse errors: Unexpected closing tag "main". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" – Mohammed Ajmal Jul 08 '18 at 01:28

angular router-outlet doen't render anything

1 Answers1