Angular13升级至Angular17遇AppAsideModule导入错误求解决

问题原因 #

Angular 17发布后，@coreui/angular库中的AppAside、AppFooter、AppHeader、AppSidebar等UI组件已从NgModule形式改为独立组件，不再需要通过模块导入。直接在NgModule的imports中引用这些旧模块会触发报错。

修复步骤 #

1. 移除AppModule中无效的模块导入 #

打开AppModule，将imports数组里的AppAsideModule、AppFooterModule、AppHeaderModule、AppSidebarModule全部移除，仅保留需要配置的AppBreadcrumbModule.forRoot()。

修改后的AppModule代码示例：

import { AppBreadcrumbModule } from "@coreui/angular";

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    KeycloakAngularModule,
    AppBreadcrumbModule.forRoot(),
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    NgxCaptchaModule,
    SharedModule,
    DropdownModule,
    DialogModule,
    CardModule,
    MenubarModule,
    SidebarModule,
    AutoCompleteModule
  ],
  declarations: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 导入并使用独立组件 #

根据你的项目组件模式选择对应方式：

方式一：组件为独立组件（Angular17默认推荐）

在需要使用这些UI组件的组件（如AppComponent）中，直接导入对应的组件类，并在组件的imports数组中声明：

import { Component } from '@angular/core';
import { AppAsideComponent, AppFooterComponent, AppHeaderComponent, AppSidebarComponent } from '@coreui/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  imports: [
    AppAsideComponent,
    AppFooterComponent,
    AppHeaderComponent,
    AppSidebarComponent
  ],
  standalone: true
})
export class AppComponent { }

方式二：组件仍使用NgModule模式

如果项目未切换到独立组件，在AppModule的imports数组中直接添加这些独立组件类即可：

import { AppBreadcrumbModule } from "@coreui/angular";
import { AppAsideComponent, AppFooterComponent, AppHeaderComponent, AppSidebarComponent } from '@coreui/angular';

@NgModule({
  imports: [
    // 原有导入项...
    AppAsideComponent,
    AppFooterComponent,
    AppHeaderComponent,
    AppSidebarComponent
  ],
  declarations: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 确保CoreUI版本兼容 #

执行以下命令升级@coreui/angular到适配Angular17的最新版本：

npm install @coreui/angular@latest

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