本文介绍了Angular 11 Universal 和 Bootstrap 5 Toast 不工作 - 新引导程序 TS2304:找不到名称“引导程序",被压碎的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用 Angular 11 Universal - 服务器端渲染.我正在尝试实现 Bootstrap 5 toast(css 运行良好),但它不理解类 new bootstrap:

I work with Angular 11 Universal - server side rendering. I'm trying to implement Bootstrap 5 toasts (css works well), but it doesn't understand class new bootstrap:

angular.json - 正确导入

angular.json - it's imported properly

            "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

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 代码实现 toast:

I was trying to implement toasts with initial JS code:

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() {
  }

}

但它不理解类引导程序 - 在新引导程序 TS2304 中:找不到名称引导程序".

But it don't understand class bootstrap - in new bootstrap TS2304: Cannot find name 'bootstrap'.

直接从 bootstrap.js 导入 toast 的 2 变体正在破坏应用程序新吐司(this.toast);

2 variant with importing toast directly from bootstrap.js is breaking the appnew Toast(this.toast);

ReferenceError: 文档未定义发生服务器错误.节点以 1 个代码退出.连接 ECONNREFUSED 127.0.0.1:62043npm 错误!代码生命周期npm 错误!错误号 1错误!client@0.0.0 dev:ssr: ng run client:serve-ssrnpm 错误!退出状态 1

ReferenceError: document is not definedA server error has occurred.node exited with 1 code.connect ECONNREFUSED 127.0.0.1:62043npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! client@0.0.0 dev:ssr: ng run client:serve-ssrnpm ERR! Exit status 1

请帮忙!有没有办法在 Angular Universal 中使用 Bootstrap 5 功能进行吐司、模态?

Please, help! Is there any way to use Bootstrap 5 functionality for toasts, modals in Angular Universal?

推荐答案

对我来说唯一正确的决定是拒绝在 Angular Universal 中使用 Bootstrap 并用 Angular Material SnackBar 和实用程序替换它.

Single right decision for me was to refuse from using Bootstrap in Angular Universal and replacing it with Angular Material SnackBar and utilities.

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

这行代码

this.toast = new Toast(this.toastEl.nativeElement,{});
  • 调用新的 Toast - 对于我尝试以任何方式实现它的方式,它在 Universal Angular 中不起作用.

这篇关于Angular 11 Universal 和 Bootstrap 5 Toast 不工作 - 新引导程序 TS2304:找不到名称“引导程序",被压碎的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 16:03
查看更多