Angular 17 and standalone component structuring

Question

I am unable to see anything on localhost except footer, header and side-nav components. What am I doing wrong here?

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>

Above is 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>

I am unable to see anything on localhost except footer, header and side-nav components. What am I doing wrong here?

I want to show home-page-actions-card also but it's not visible.

Answer 1

looking like you forgot to import HomePageActionsCardComponent in app component.ts