在Angular中用NgBootstrap实现弹窗表单遇NgbModule导入错误

我正尝试在Angular中结合NgBootstrap和FormsModule实现弹窗表单，但导入NgbModule后出现多个错误。

我的环境配置：

• Node版本：16.15.1
• Angular CLI版本：15.1.5
• Angular Core版本：15.1.4

已安装的依赖包括font-awesome、bootstrap、@ng-bootstrap/ng-bootstrap、angular-material等。在app.module.ts的Imports数组中添加NgbModule后触发报错，其中一个错误截图如下：

相关package.json代码：

{
  "name": "cragcity-website",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "build": "ng build",
    "build-prod": "ng build --prod",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "15.1.4",
    "@angular/cdk": "15.1.4",
    "@angular/common": "15.1.4",
    "@angular/compiler": "15.1.4",
    "@angular/core": "15.1.4",
    "@angular/flex-layout": "12.0.0-beta.34",
    "@angular/forms": "15.1.4",
    "@angular/material": "15.1.4",
    "@angular/platform-browser": "15.1.4",
    "@angular/platform-browser-dynamic": "15.1.4",
    "@angular/router": "15.1.4",
    "@ckeditor/ckeditor5-angular": "^2.0.2",
    "@ckeditor/ckeditor5-build-classic": "^31.0.0",
    "@ckeditor/ckeditor5-upload": "^31.0.0",
    "angularx-social-login": "3.5.7",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.2",
    "font-awesome": "^4.7.0",
    "jquery": "^3.6.3",
    "ng-recaptcha": "^8.0.1",
    "ngx-toastr": "14.0.0",
    "ngx-treeview": "10.0.2",
    "ngx-ui-loader": "13.0.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.6.0",
    "tslib": "2.2.0",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "15.1.5",
    "@angular/cli": "15.1.5",
    "@angular/compiler-cli": "15.1.4",
    "@types/jasmine": "3.8.1",
    "@types/node": "12.11.1",
    "jasmine-core": "3.8.0",
    "karma": "^6.4.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage": "2.0.3",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.7.0",
    "typescript": "4.9.5"
  }
}

相关app.module.ts代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { SocialLoginModule, FacebookLoginProvider, GoogleLoginProvider, SocialAuthServiceConfig } from "angularx-social-login";
import { environment } from '../environments/environment';

// components
import { AppComponent } from './app.component';
import { MtlComponent } from './components/mtl/mtl.component';
import { AvatarIconComponent } from './svg-icons/avatar/avatar-icon/avatar-icon.component';
import { HeartIconComponent } from './svg-icons/heart/heart-icon/heart-icon.component';
import { DownloadIconComponent } from './svg-icons/download/download-icon/download-icon.component';
import { ShareIconComponent } from './svg-icons/share/share-icon/share-icon.component';
import { CragcityLogoComponent } from './components/cragcity-logo/cragcity-logo.component';
import { CragcityFooterComponent } from './components/cragcity-footer/cragcity-footer.component';

import { LandingComponent } from './components/mtl/landing/landing.component';
import { SharedModule } from './components/shared/shared.module';
import { SubcategoryComponent } from './components/mtl/subcategory/subcategory.component';

import { RequestInterceptor } from './core/interceptors/request.interceptor';
import { ResponseInterceptor } from './core/interceptors/response.interceptor';
import { ToastrModule } from 'ngx-toastr';
import { NgxUiLoaderModule } from 'ngx-ui-loader';
import { ngxConfig } from './shared/constants'
import { SubCategoryUserComponent } from './components/mtl/subcategory/users/subcategoryuser.component';
import { SubcategoryUserAssignComponent } from './components/mtl/subcategory-user-assign/subcategory-user-assign.component';
import { TreeviewModule } from 'ngx-treeview';
import { DropdownIconComponent } from './svg-icons/dropdown/dropdown-icon/dropdown-icon.component';
import { AboutComponent } from './components/about/about.component';
import { ContactComponent } from './components/contact/contact.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ForgotPasswordComponent } from './components/account/forgot-password/forgot-password.component';
import { AccountModule } from './components/account/account.module';
import { AuthenticationComponent } from './components/authentication/authentication.component';
import { AuthenticationModule } from './components/authentication/authentication.module';
import { ResetPasswordComponent } from './components/authentication/reset-password/reset-password.component';
import { NewsFeedComponent } from './components/news-feed/news-feed.component';
import { PostComponent } from './components/news-feed/post/post.component';
import { NewsFeedDetailsComponent } from './components/news-feed/news-feed-details/news-feed-details.component';
import { SocialMShareComponent } from './components/mtl/socialM-share/socialM-share.component';

@NgModule({
  declarations: [
    AppComponent,
    MtlComponent,
    AvatarIconComponent,
    HeartIconComponent,
    DownloadIconComponent,
    ShareIconComponent,
    CragcityLogoComponent,
    CragcityFooterComponent,
    LandingComponent,
    SubcategoryComponent,
    SubCategoryUserComponent,
    SubcategoryUserAssignComponent,
    DropdownIconComponent,
    AboutComponent,
    ContactComponent,
    NewsFeedComponent,
    PostComponent,
    NewsFeedDetailsComponent,
    SocialMShareComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    ToastrModule.forRoot(),
    NgxUiLoaderModule.forRoot(ngxConfig),
    TreeviewModule.forRoot(),
    HttpClientModule,
    SocialLoginModule,
    SharedModule,
    AccountModule,
    NgbModule
  ],
  exports: [
    CragcityLogoComponent
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RequestInterceptor,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ResponseInterceptor,
      multi: true
    },
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(environment.googleClientId)
          },
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider(environment.facebookAppId)
          }
        ]
      } as SocialAuthServiceConfig,
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

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