没有引导 cdn 链接，ngb-rating 不起作用

Posted 2023-03-21

【中文标题】没有引导 cdn 链接，ngb-rating 不起作用

【英文标题】：ngb-rating is not working without bootstrap cdn links

【发布时间】：2021-10-11 08:03:15

【问题描述】：

user.module.ts

这是我的用户模块 user.module.ts 代码

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  SideNavbarComponent  from './components/side-navbar/side-navbar.component';
import  UserProfileComponent  from './components/user-profile/user-profile.component';
import  AddressComponent  from './components/address/address.component';
import  OrdersComponent  from './components/orders/orders.component';
import  TrackingComponent  from './components/tracking/tracking.component';
import  HttpClientModule  from '@angular/common/http';
import  RouterModule  from '@angular/router';
import  NgbModule  from "@ng-bootstrap/ng-bootstrap";
import  AngmaterialModule  from '../angmaterial/angmaterial.module';
import  FilterPipe  from './pipes/filter.pipe';
import  CartButtonComponent  from './cart-button/cart-button.component';
import  ItemDisplayComponent  from './item-display/item-display.component';
import  ProductsDisplayComponent  from './products-display/products-display.component';
import  FiltersComponent  from './filters/filters.component';
import  SortPipe  from './pipes/sort.pipe';
import  PriceFilterPipe  from './pipes/price-filter.pipe';





@NgModule(
  declarations: [
    SideNavbarComponent,
    UserProfileComponent,
    AddressComponent,
    OrdersComponent,
    TrackingComponent,
    CartButtonComponent,
    ItemDisplayComponent,
    ProductsDisplayComponent,
    FilterPipe,
    FiltersComponent,
    SortPipe,
    PriceFilterPipe
  ],
  imports: [
    CommonModule,
    HttpClientModule,
    RouterModule,
    AngmaterialModule,
    NgbModule
  ],providers:[],
  exports:[SideNavbarComponent,OrdersComponent,UserProfileComponent,TrackingComponent]
)
export class UserModule  

这是我的产品页面代码，在用户模块中 products.component.html

 <ng-template #t let-fill="fill">
                    <span class="star" [class.full]="fill === 100">
                    <span class="half" [style.width.%]="fill">&hearts;</span>&hearts;
                    </span>
                </ng-template>
                <ngb-rating [(rate)]="x.rating" [starTemplate]="t" [readonly]="true" [max]="5"></ngb-rating>

我的产品组件ts文件

products.ts 文件

x=
.......,
rating:"4.2"

package.json

  "name": "e-commerce",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "~12.0.1",
    "@angular/cdk": "^12.1.3",
    "@angular/common": "~12.0.1",
    "@angular/compiler": "~12.0.1",
    "@angular/core": "~12.0.1",
    "@angular/forms": "~12.0.1",
    "@angular/localize": "~12.0.1",
    "@angular/material": "^12.1.3",
    "@angular/platform-browser": "~12.0.1",
    "@angular/platform-browser-dynamic": "~12.0.1",
    "@angular/router": "~12.0.1",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
    "angular-bootstrap-md": "^4.3.2",
    "bootstrap": "^5.1.0",
    "jquery": "^3.6.0",
    "mdb-angular-ui-kit": "^1.0.0-beta8",
    "mdb-ui-kit": "^3.9.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "~12.0.1",
    "@angular/cli": "^12.1.4",
    "@angular/compiler-cli": "~12.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  

这是 angular.json 导入的样式 angular.json

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/jquery/dist/jquery.min.js"
            ],
            "scripts": []

【参考方案1】：

provided demo 使用 Bootstrap 4.5.3 如下：

<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

同时，在提供的 angular.json 中，您使用的是 Bootstrap 5.1。

"bootstrap": "^5.1.0"

并根据@ng-bootstrap/ng-bootstrap (Dependency Section)：

ng-bootstrap	Angular	Bootstrap CSS
10.0.0	12.0.0	4.5.0

---

解决方案

因此，您必须将 Bootstrap 降级到 4.5 版。

npm install bootstrap@4.5

Sample Solution on StackBlitz

---

关注

jquery.min.js 必须在 scripts 部分中导入，不是样式部分。

  ...,
  "styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.min.js"
  ]