CODEWITHSUNDEEP
angular
x7R5fQ
x7R5fQ

Reputation: 1029

<router-outlet> makes html content disappear in Angular

I am not sure why <router-outlet> </router-outlet> makes the content of app.component.html disappear. For example, since I do not have <router-outlet> </router-outlet> in the below code everything is fine.

app.component.html

<div style="text-align:center">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Abdulaziz</a>
          </div>
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#home">Home</a>
            </li>
            <li>
              <a href="#pics">Pictures</a>
            </li>
            <li>
              <a href="links.html">Links</a>
            </li>
            <li>
              <a href="#articles">Articles</a>
              </li>
          </ul>
        </div>
      </nav>

      <br> <br>

</div>

whenever I add <router-outlet> </router-outlet> under the </div> the content disappear immediately. Note that this problem does not show up in another project I have.

Upvotes: 3

Views: 1868

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

Try this:

Import RouterModule into your app.module.ts

import { RouterModule } from '@angular/router';

Add RouterModule into your imports []

like this:

imports: [RouterModule]

if you have a separate routing Module, import it there and export it

Upvotes: 1

Related Questions