Angular 17独立项目集成angular-calendar遇组件识别问题求助

问题背景 #

在Angular 17独立项目中集成angular-calendar，目标实现可点击日期的交互功能，但参考的官方Demo基于传统带app.module.ts的项目，当前遇到组件无法识别的报错。

尝试的代码 #

component.ts #

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, importProvidersFrom } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import 'zone.js';
import {
  CalendarModule,
  CalendarEvent,
  DateAdapter,
  CalendarUtils,
} from 'angular-calendar';
import { CommonModule } from '@angular/common';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { ChangeDetectionStrategy } from '@angular/core';
import { CalendarView } from 'angular-calendar';

@Component({
  selector: 'mwl-demo-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  templateUrl: './simple-calendar.component.html',
})
export class SimpleCalendarComponent {
  view: CalendarView = CalendarView.Month;
  viewDate: Date = new Date();
  events: CalendarEvent[] = [];
  clickedDate: Date;
  clickedColumn: number;
}

bootstrapApplication(SimpleCalendarComponent, {
  providers: [
    provideAnimations(),
    importProvidersFrom(
      CalendarModule.forRoot({
        provide: DateAdapter,
        useFactory: adapterFactory,
      })
    ),
    CalendarUtils
  ],
});

component.html #

<mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate">
</mwl-demo-utils-calendar-header>

<div class="alert alert-info">
  Click on a day or time slot on the view.
  <strong *ngIf="clickedDate"
    >You clicked on this time: {{ clickedDate | date:'medium' }}</strong
  >
  <strong *ngIf="clickedColumn !== undefined"
    >You clicked on this column: {{ clickedColumn }}</strong
  >
</div>

<div [ngSwitch]="view">
  <mwl-calendar-month-view
    *ngSwitchCase="'month'"
    [viewDate]="viewDate"
    [events]="events"
    (columnHeaderClicked)="clickedColumn = $event.isoDayNumber"
    (dayClicked)="clickedDate = $event.day.date"
  >
  </mwl-calendar-month-view>
  <mwl-calendar-week-view
    *ngSwitchCase="'week'"
    [viewDate]="viewDate"
    [events]="events"
    (dayHeaderClicked)="clickedDate = $event.day.date"
    (hourSegmentClicked)="clickedDate = $event.date"
  >
  </mwl-calendar-week-view>
  <mwl-calendar-day-view
    *ngSwitchCase="'day'"
    [viewDate]="viewDate"
    [events]="events"
    (hourSegmentClicked)="clickedDate = $event.date"
  >
  </mwl-calendar-day-view>
</div>

报错信息 #

NG8001: 'mwl-demo-utils-calendar-header' is not a known element:
1. If 'mwl-demo-utils-calendar-header' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'mwl-demo-utils-calendar-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.

解决方案 #

1. 修复独立组件的模块导入问题 #

Angular 17独立组件需要显式导入依赖的模块，在@Component的imports数组中添加CommonModule（支持ngSwitch、*ngIf、date管道等指令）和CalendarModule（angular-calendar的核心组件模块）：

修改component.ts中的组件装饰器：

@Component({
  selector: 'mwl-demo-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [CommonModule, CalendarModule], // 新增此行
  templateUrl: './simple-calendar.component.html',
})

2. 替换Demo专属的头部组件 #

mwl-demo-utils-calendar-header是官方Demo项目的自定义组件，不属于angular-calendar库的一部分，需要自己实现视图切换逻辑。可以用简单的按钮组替代：

修改component.ts

在组件类中添加CalendarView的引用，让模板可以直接访问：

export class SimpleCalendarComponent {
  view: CalendarView = CalendarView.Month;
  viewDate: Date = new Date();
  events: CalendarEvent[] = [];
  clickedDate: Date;
  clickedColumn: number;
  CalendarView = CalendarView; // 新增此行，模板可直接使用枚举值
}

修改component.html

替换原有的<mwl-demo-utils-calendar-header>部分：

<div class="calendar-controls">
  <button (click)="view = CalendarView.Month" [class.active]="view === CalendarView.Month">月视图</button>
  <button (click)="view = CalendarView.Week" [class.active]="view === CalendarView.Week">周视图</button>
  <button (click)="view = CalendarView.Day" [class.active]="view === CalendarView.Day">日视图</button>
  <button (click)="viewDate = new Date()">回到今天</button>
</div>

3. 验证依赖完整性 #

确保已安装所有必要依赖：

npm install angular-calendar date-fns @angular/animations

完成以上修改后，angular-calendar的组件就能正常识别，点击日期的功能也能正常工作。

内容的提问来源于stack exchange，提问作者Patrik