Angular 11 Universal 和 Bootstrap 5 Toast 不工作 - 新引導 TS2304：找不到名稱“bootstrap”，已損壞

Question

我使用 Angular 11 Universal - 服務器端渲染。 我正在嘗試實現 Bootstrap 5 toasts（css 運行良好），但它不理解 class 新的引導程序：

angular.json - 正確導入

 "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/@popperjs/core/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

package.json

 "@angular/platform-browser": "~11.2.7", "@angular/platform-browser-dynamic": "~11.2.7", "@angular/platform-server": "~11.2.7", "@angular/router": "~11.2.7", "@nguniversal/express-engine": "^11.2.1", "@popperjs/core": "^2.9.2", "bootstrap": "^5.0.0-beta3", "express": "^4.15.2", "popper.js": "^1.16.1",

我試圖用初始 JS 代碼實現 toasts：

 import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, PLATFORM_ID, ViewChild } from '@angular/core'; import { Toast } from '../../../../../node_modules/bootstrap/dist/js/bootstrap.min.js' import {isPlatformBrowser} from "@angular/common"; @Component({ selector: 'app-toast', templateUrl: './toast.component.html', styleUrls: ['./toast.component.scss'] }) export class ToastComponent implements OnInit, AfterViewInit { @Output() closeHit: EventEmitter<boolean> = new EventEmitter<boolean>(); // @Input() title: string = "Toast"; @Input() message: string = 'Enter message here'; @ViewChild('toast') toast: ElementRef<HTMLDivElement> constructor(@Inject(PLATFORM_ID) private platformId: Object) { if (isPlatformBrowser(this.platformId)) { // var toastElList = [].slice.call(document.querySelectorAll('.toast')) // var toastList = toastElList.map(function (toastEl) { return new bootstrap.Toast(this.toast, {}) // }) new Toast(this.toast); // Array.from(document.querySelectorAll('.toast')) //.forEach(toastNode => new Toast(toastNode)) } } ngOnInit(): void { } ngAfterViewInit() { } }

但它不理解 class bootstrap - 在新的 bootstrap TS2304 中：找不到名稱“bootstrap”。

2 直接從 bootstrap.js 導入 toast 的變體破壞了應用程序 new Toast(this.toast);

ReferenceError: document is not defined 發生服務器錯誤。 節點以 1 個代碼退出。 連接 ECONNREFUSED 127.0.0.1:62043 npm 錯誤。 代碼 ELIFECYCLE npm 錯誤。 errno 1 npm ERR: client@0:0.0 dev:ssr: ng run client:serve-ssr npm ERR! 退出狀態 1

求助，有什么方法可以使用 Bootstrap 5 功能進行吐司嗎？ Angular 通用模態？

Answer 1

Angular 12 & 引導程序 5.TS

@ViewChild('myToast',{static:true}) toastEl!: ElementRef<HTMLDivElement>;
toast: Toast | null = null;

ngOnInit()
{
     this.toast = new Toast(this.toastEl.nativeElement,{});
}

show(){
  this.toast!.show();
}

HTML

<button type="button" class="btn btn-primary" id="liveToastBtn" 
(click)="show()">Show live toast</button>

 <div #myToast role="alert" aria-live="assertive" aria-atomic="true" 
 class="toast fade" data-bs-autohide="false">
 <div class="toast-header">
 <img src="..." class="rounded me-2" alt="...">
 <strong class="me-auto">Bootstrap</strong>
 <small>11 mins ago</small>
 <button type="button" class="btn-close" data-bs-dismiss="toast" aria- 
 label="Close"></button>
  </div>
  <div class="toast-body">
  Hello, world! This is a toast message.
 </div>
 </div>

Answer 2

添加引導程序/類型

npm i @types/bootstrap

然后在你的組件中導入 Toast

import {Toast} from 'bootstrap'

為您的吐司使用模板參考

<div #myToast role="alert" aria-live="assertive" aria-atomic="true" class="toast fade" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

並使用 ViewChild 和 static true 在 ngOnInit 中創建 Toast 元素

  @ViewChild('myToast',{static:true}) toastEl: any
  isClosed(){
    return !this.toastEl.nativeElement.classList.contains('show')
  }
  toast:any
  ngOnInit()
  {
    this.toast=new Toast(this.toastEl.nativeElement,{})
  }

然后使用 toast.show() 或 toast.hide()

看堆棧閃電戰

注意：您還可以使用具有 toast 組件的庫，例如ng-bootstrap （我之所以這樣說是因為它更接近引導程序並且是“純”Angular

更新我們可以使用指令改進代碼

如果我們創建一個類似的指令

import {Directive,ElementRef} from '@angular/core'
import {Toast} from 'bootstrap'
@Directive({
  selector: '.toast', //<--(1)
})
export class ToastDirective {
  toast:any;
  isClosed(){
    return !this.el.nativeElement.classList.contains('show')
  }
  constructor(private el:ElementRef){
    this.toast=new Toast(this.el.nativeElement)
  }
  toogle()
  {
    if (this.isClosed())
      this.toast.show();
    else
      this.toast.hide();
  }
  hide(){
    this.toast.hide();
  }
  show(){
    this.toast.show();
  }
}

(1) 使該指令適用於所有具有 class="toast" 的 div。

我們都“封裝”了，現在如果我們舉杯

<div #myToast role="alert" aria-live="assertive" aria-atomic="true" class="toast fade" data-bs-autohide="false">
...
</div>

ViewChild 現在是

 @ViewChild('myToast',{static:true,read:ToastDirective}) toast: ToastDirective

我們可以做，例如

<button class="btn btn-primary" (click)="toast.toogle()">toogle</button>

我創建了另一個堆棧閃電戰

Answer 3

npm install bootstrap
npm install @types/bootstrap


code...
const Bootstrap = await import('bootstrap');
const Modal = new Bootstrap.Modal(...element..., ...options...);

angular.json
"build": {
    ...,
    "options": {
        ...,    
        "allowedCommonJsDependencies": [
            "bootstrap"
        ],
        ...
    },
    ...
}

像這樣吐司

Answer 4

錯誤 npm ERR。 在 client@0.0:0 dev,ssr 腳本上失敗 - 據我了解，它沒有在服務器上呈現，引導程序需要 DOM。 但這只是服務器端。

 The app is crashed: E:\PRACTICE\MYPETPROJECTS\tanechka\client\dist\client\server\main.js:79069 EventHandler.on(document, EVENT_CLICK_DATA_API$7, SELECTOR_DISMISS, Alert.handleDismiss(new Alert())); ^ ReferenceError: document is not defined at E:\PRACTICE\MYPETPROJECTS\tanechka\client\dist\client\server\main.js:79069:19 at E:\PRACTICE\MYPETPROJECTS\tanechka\client\dist\client\server\main.js:78335:28 at Object.SYky (E:\PRACTICE\MYPETPROJECTS\tanechka\client\dist\client\server\main.js:78337:2) at __webpack_require__ (E:\PRACTICE\MYPETPROJECTS\tanechka\client\dist\client\server\main.js:26:30) at Module.Mvz9 (E:\PRACTICE\MYPETPROJECTS\tanechka\client\dist\client\server\main.js:71515:67) at __webpack_require__ (E:\PRACTICE\MYPETPROJECTS\tanechka\client\dist\client\server\main.js:26:30) at Module.PCNd (E:\PRACTICE\MYPETPROJECTS\tanechka\client\dist\client\server\main.js:74232:91) at __webpack_require__ (E:\PRACTICE\MYPETPROJECTS\tanechka\client\dist\client\server\main.js:26:30) at Module.ZAI4 (E:\PRACTICE\MYPETPROJECTS\tanechka\client\dist\client\server\main.js:90421:79) at __webpack_require__ (E:\PRACTICE\MYPETPROJECTS\tanechka\client\dist\client\server\main.js:26:30) A server error has occurred. node exited with 1 code. connect ECONNREFUSED 127.0.0.1:60499 npm ERR. code ELIFECYCLE npm ERR. errno 1 npm ERR: client@0:0:0 dev.ssr. `ng run client:serve-ssr` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the client@0.0.0 dev:ssr script

Answer 5

對我來說，唯一正確的決定是拒絕在 Angular Universal 中使用 Bootstrap，並將其替換為 Angular Material SnackBar 和實用程序。

https://material.angular.io/components/snack-bar/examples

這行代碼

 this.toast = new Toast(this.toastEl.nativeElement,{});

• 調用 new Toast - 它在 Universal Angular 中不起作用，因為我試圖以任何方式實現它。

Answer 6

您也可以嘗試以下 npm package 用於小吃吧。 這個 package 使用 Angular 材料實現作為引導程序的默認主題。

npm install --save @tech-pro/ngx-bootstrap-snackbar

NPM 鏈接到 Package

演示