更新 Angular 18 问题

Question

我正在将 Ionic Angular 项目迁移到 Angular 18。 更新软件包后，出现以下错误：

Error

:

1. If 'ion-searchbar' is an Angular component, then verify that it is part of this module.
2. If 'ion-searchbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

4         <ion-searchbar (ionInput)="searchData($event)" color="light" debounce="500"></ion-searchbar>

  src/app/modals/searchable-adress-modal-component/searchable-adress-modal-component.component.ts:7:18
    7     templateUrl: './searchable-adress-modal-component.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SearchableAdressModalComponentComponent.


Error: src/app/modals/searchable-adress-modal-component/searchable-adress-modal-component.component.html:5:9 - error NG8001: 'ion-spinner' is not a known element:
1. If 'ion-spinner' is an Angular component, then verify that it is part of this module.
2. If 'ion-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

5         <ion-spinner *ngIf="loadDataSpinner" class="w-full justify-center mt-3 mb-3" color="primary"
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6 name="lines-sharp"></ion-spinner>
  src/app/modals/searchable-adress-modal-component/searchable-adress-modal-component.component.ts:7:18
    7     templateUrl: './searchable-adress-modal-component.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SearchableAdressModalComponentComponent.

Ionic Module 已导入 App.Module.ts

@NgModule({
declarations: [AppComponent, ...],
imports: [        IonicModule.forRoot({
            scrollPadding: true,
            scrollAssist: true
        }),...],
providers: []
    providers: [
        {
            provide: RouteReuseStrategy,
            useClass: IonicRouteStrategy
        },
        {
            provide: ErrorHandler,
            // Attach the Sentry ErrorHandler
            useValue: SentryAngular.createErrorHandler()
        },
        {
            provide: SentryAngular.TraceService,
            deps: [Router]
        },
        {
            provide: APP_INITIALIZER,
            useFactory: () => () => {},
            deps: [TraceService],
            multi: true,
        },
    ],
    bootstrap: [AppComponent],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
}

所以我的模块没有正确导入。我安装了 Angular 版本 18.2.7 和 ionic/Angular v8.3.2 我为此苦苦挣扎了好几个小时。我尝试重新安装几次，并查看了换生灵，但没有任何提示。

Answer 1

检查 searchable-adress-modal-component.component.ts 组件是否为
是否自动转换为独立组件
升级到 Angular 18 时？

如果它没有转换为独立组件那么
请忽略下面的答案。

如果是，则在组件 TS 文件中从 '@ionic/angular' 导入 IonicModule。
例如
@成分（{
....
  独立：真实，
  导入：[IonicModule]，
....
})

由于独立组件直接指定它们的依赖关系
而不是通过 NgModules 获取它们。