CODEWITHSUNDEEP
angularroutes
Mathieu d.o
Mathieu d.o

Reputation: 111

Angular routing return empty page

I have a problem.

https://stackblitz.com/edit/angular-sc7zsc

My component Composition is not called ... Why? I have already saw others post but it not resolve my problem Thanks

Upvotes: 1

Views: 1941

Answers (5)

khurshid
khurshid

Reputation: 71

you have missed the <router-outlet> </router-outlet> Please add below code after nav in app.component html file.

<router-outlet> </router-outlet>

Upvotes: 0

Uttam Kumar Mishra
Uttam Kumar Mishra

Reputation: 122

Add base path in the head section of index.html file

<base href="/">

Add <router-outlet></router-outlet> in the app.component.html, also you have changed index.html code. Please don't change index.html, instead add base path to it suggested above.

Upvotes: 0

Anil Kumar Reddy A
Anil Kumar Reddy A

Reputation: 648

you just placing router-outlet tag

keep the router-outlet tag where you want to display the routed component

here's forked repo of stackblitz Forked Stackblitz

Upvotes: 0

rajat gangwani
rajat gangwani

Reputation: 34

Issue Resolved.Update as in picture

enter image description here

Upvotes: -1

rcanpahali
rcanpahali

Reputation: 2643

Fixed code here, don't forget to navigate your Composition page. Composition.component

<!doctype <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

</head>
<body>


  <nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar">
    <!-- Brand -->
      <a routerLink="" class="pull-left">
        <img src="//www.behi.fr/wp-content/themes/behi-wp/assets/images/logo-softee.svg" class="logo-softee">
      </a> 

    <!-- Links -->
    <ul class="navbar-nav">

      <li class="nav-item" routerLinkActive="active" >
        <a class="nav-link" routerLink ="Composition" >Composition</a>
      </li>
      <div *ngIf="validCompo;then green_circle else red_circle">
          <ng-template #red_circle><img name="redCircle" style="width:15px;height:15px;margin-left:-45px;margin-top: 20px;" src="../../assets/images/circle/red_circle_16.png"></ng-template>
          <ng-template #green_circle><img name="greenCircle" style="width:15px;height:15px;margin-left:-45px;margin-top: 20px;" src="../../assets/images/circle/green_circle_16.png"></ng-template>
      </div>

    </ul>

  </nav>
<router-outlet></router-outlet> // <== feed your content from here
</body>
</html>

Upvotes: 3

Related Questions