升级Swiper至v9.0.3后出现'swiper-container'未知元素问题求助

Swiper v9默认采用Web Components实现，而非之前版本的Angular封装组件，因此需按Web Components的方式配置项目，以下是具体解决步骤：

• 确认安装与依赖清理

  1. 安装指定版本Swiper：npm install swiper@9.0.3
  2. 若之前使用过ngx-swiper-wrapper这类第三方Angular封装包，需卸载避免冲突：npm uninstall ngx-swiper-wrapper

• 配置组件支持Web Components
  在使用swiper-container的组件.ts文件中，添加CUSTOM_ELEMENTS_SCHEMA到schemas数组：

  import { Component } from '@angular/core';
  import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  
  @Component({
    selector: 'app-target-component',
    templateUrl: './target-component.component.html',
    styleUrls: ['./target-component.component.css'],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class TargetComponentComponent { }
  

  若要让整个模块都支持Web Components，可在模块的@NgModule中添加该schema：

  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { TargetComponentComponent } from './target-component.component';
  
  @NgModule({
    declarations: [TargetComponentComponent],
    imports: [CommonModule],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class TargetModule { }
  

• 导入Swiper的Web Components定义与样式
  在组件.ts或项目入口main.ts中导入必要资源并注册组件：

  // 导入基础样式及所需组件样式（如导航、分页）
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  // 注册Swiper的Web Components
  import { register } from 'swiper/element/bundle';
  register();
  

• 修正模板中的使用语法
  确保模板标签符合Swiper v9 Web Components规范，示例：

  <swiper-container slides-per-view="3" space-between="30">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper-container>
  

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