Angular安装ng-bootstrap后项目瘫痪，版本匹配仍报错求助

错误信息 #

版本信息 #

问题描述 #

安装@ng-bootstrap/ng-bootstrap包后项目无法正常运行，安装前项目运行一切正常。尽管已经考虑版本兼容性选择了对应版本，但问题仍未解决。

依赖包配置 #

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.5",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "~10.1.5",
    "@angular/compiler": "~10.1.5",
    "@angular/core": "~10.1.5",
    "@angular/forms": "~10.1.5",
    "@angular/platform-browser": "~10.1.5",
    "@angular/platform-browser-dynamic": "~10.1.5",
    "@angular/router": "~10.1.5",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "@types/jquery": "^3.5.14",
    "bootstrap": "4.1.1",
    "bootswatch": "^4.5.3",
    "font-awesome": "^4.7.0",
    "guid-typescript": "^1.0.9",
    "jquery": "^3.6.3",
    "ngx-bootstrap": "^6.2.0",
    "ngx-spinner": "^10.0.1",
    "ngx-toastr": "^13.1.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "uuid": "^8.3.1",
    "xng-breadcrumb": "^6.3.4",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.6",
    "@angular/cli": "~10.1.6",
    "@angular/compiler-cli": "~10.1.5",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

angular.json配置 #

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "client": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "./node_modules/bootswatch/dist/litera/bootstrap.min.css",
              "./node_modules/font-awesome/css/font-awesome.min.css",
              "./node_modules/ngx-toastr/toastr.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "client:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "client:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "client:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "client:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "client",
  "cli": {
    "analytics": "64b2cb7e-6ddb-424e-acff-1173bf93f413"
  }
}

styles.css代码 #

html, body { height: 100%; }
    
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
    
//@import '~bootstrap/dist/css/bootstrap.min.css';
    
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

AppModule代码 #

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CoreModule } from './core/core.module';
import { ShopModule } from './shop/shop.module';
import { HomeModule } from './home/home.module';
import { ErrorInterceptor } from './core/interceptors/error.interceptor';
import { LoadingInterceptor } from './core/interceptors/loading.interceptor';
import {NgxSpinnerModule} from 'ngx-spinner';
import { from } from 'rxjs';
import { CommonModule } from '@angular/common';
import { JWTInterceptor } from './core/interceptors/jwt.interceptors';
import { NgbPaginationModule, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    CoreModule,
    ShopModule,
    HomeModule,
    NgxSpinnerModule,
    CommonModule,
    NgbPaginationModule, 
    NgbAlertModule
  ],
  providers: [
    {provide: HTTP_INTERCEPTORS, useClass:ErrorInterceptor, multi:true},
    {provide: HTTP_INTERCEPTORS, useClass:LoadingInterceptor, multi:true},
    {provide: HTTP_INTERCEPTORS, useClass:JWTInterceptor, multi:true}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { } 

已尝试操作 #

解决方案建议 #

1. 升级Bootstrap版本 #

ng-bootstrap 7.x要求Bootstrap版本至少为4.5.x，当前项目使用的4.1.1版本过低，会导致兼容性问题。执行以下命令升级：

npm install bootstrap@4.5.3 --save

2. 移除重复的Bootstrap封装库 #

项目同时引入了ngx-bootstrap和@ng-bootstrap/ng-bootstrap，两个库都是Angular的Bootstrap封装，同时使用必然引发冲突。建议二选一：

• 若保留@ng-bootstrap/ng-bootstrap，卸载ngx-bootstrap：

npm uninstall ngx-bootstrap --save

同时删除angular.json中styles数组里的./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css引用。

3. 清理依赖并重新安装 #

执行以下命令清理缓存和旧依赖，重新安装确保依赖完整：

rm -rf node_modules package-lock.json
npm install

4. 调整样式引入顺序 #

Bootswatch是基于Bootstrap的主题，必须在Bootstrap样式之后引入才能生效。修改angular.json的styles数组顺序：

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "./node_modules/bootswatch/dist/litera/bootstrap.min.css",
  "./node_modules/font-awesome/css/font-awesome.min.css",
  "./node_modules/ngx-toastr/toastr.css",
  "src/styles.css"
]

5. 移除冗余模块导入 #

BrowserModule已经包含了CommonModule，AppModule中无需重复导入CommonModule，直接删除该导入语句即可。

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