Is something wrong with my code if I can only see the footer, header, and side-nav components on localhost? How can I fix this?
app.component.html
<div class="container-fluid">
<div class="row">
<div class="col-12">
<app-header></app-header>
</div>
</div>
<div class="left-menu">
<app-sidenav></app-sidenav>
</div>
<a class="nav-link" routerLink="homePage">Home</a>
<div class="content-wrapper-right">
<router-outlet></router-outlet>
</div>
<div class="row">
<div class="modal-footer" class="col-12">
<app-footer></app-footer>
</div>
</div>
</div>
The above code snippet is from the app.component.html file.
app.component.ts
@Component({
selector: 'app-root',
standalone: true,
imports: [
RouterOutlet,
CommonModule,
HeaderComponent,
FooterComponent,
SidenavComponent,
HomePageComponent,
RouterModule
],
// providers: [ToastrService],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
home-page.component.ts
@Component({
selector: 'app-home-page',
standalone: true,
imports: [HomePageActionsCardComponent],
templateUrl: './home-page.component.html',
styleUrl: './home-page.component.scss'
})
home-page.component.html
<div>
<app-home-page-actions-card></app-home-page-actions-card>
</div>`
home-page-actions-card
<span class="border-0 ">
<span class="card shadow rounded border-0 w-100">
<div class="card-content">
<div class="card-header custom-class">
<div class="card-title">
Hello There!
</div>
</div>
<div class="card-body mr-1">
<div>
<span>
</span>
</div>
</div>
</div>
</span>
</span>
When I view localhost, I can only see the footer, header, and side-nav components. What could be causing this issue? Additionally, the home-page-actions-card is not visible as well.