NG-Zorro - Date picker Calendar is not showing

I'm currently working on my university final project, and I'm stuck. I'm creating a web application for fitness tracking, and on one of the subpages, the user should be able to enter information about their activities. In the last row of the form, they should be able to enter the date through a date picker, but the little calendar icon isn't showing up. After entering all the information, the button below the form should become clickable, but I tried it without the date section, and it still doesn’t work.

Does anyone have any ideas why?

Thanks!

<div>

    <div nz-row>
        <h1 nz-card-grid [ngStyle]="gridStyle">Activity</h1>
    </div>

    <div nz-row>
        <div nz-col nzFlex="2">
            <nz-card nzType="inner" style="margin-top: 16px;" nzTitle="Post New Activity">
                <form nz-form [formGroup]="activityForm" class="custom-form">
                    <nz-form-item>
                        <nz-form-control nzErrorTip="Please input the calories!">
                            <input type="text" nz-input formControlName="caloriesBurned"
                                placeholder="Enter the calories you burned" />
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item>
                        <nz-form-control nzErrorTip="Please input the distance!">
                            <input type="number" nz-input formControlName="distance"
                                placeholder="Enter distance" />
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item>
                        <nz-form-control nzErrorTip="Please input the steps!">
                            <input type="number" nz-input formControlName="steps"
                                placeholder="Enter steps" />
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item>
                        <nz-form-control nzErrorTip="Please input the date">
                            <nz-date-picker style="width: 100%;" formControlName="date"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>

                    <button nz-button nzType="primary" nzBlock class="w-100" [disabled]="activityForm.invalid">
                        Post Activity
                    </button>
                </form>

            </nz-card>
        </div>
        <div nz-col nzFlex="3" style="margin-left: 20px;">

        </div>
    </div>
</div>

I tried changing it in several ways, even copying the NG-Zorro example code for the date picker from their website, but the calendar still didn’t show up.

Here is the error created on StackBlitz: https://stackblitz.com/github/Matevic/Final-Project?embed=1&file=src%2Fapp%2Fcomponents%2Factivity%2Factivity.component.html

You shouldn't add bootstrap: [ AppComponent ] in your SharedModule. As this aims to be used to set the component as entry application which is normally used in the root module.

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    DemoNgZorroAntdModule,
    FormsModule,
    ReactiveFormsModule,
    RouterLink,
    RouterOutlet,

  ],
  exports:[
    CommonModule,
    DemoNgZorroAntdModule,
    FormsModule,
    ReactiveFormsModule,
    RouterLink,
    RouterOutlet,
  
  ],
  providers: [provideHttpClient()],
  //bootstrap: [ AppComponent ] <-- Remove this
})
export class SharedModule { }