Search code examples
angularbootstrap-5angular17angular-standalone-components

Error adding bootstrap 5 toaster to angular 17 as standalone components

I am trying to add a bootstrap toaster to my angular project. I am using angular 17 with standalone components.

I am trying to follow what was done in this github repository but my project is standalone.

Running ng serve is successful but when I am trying to access http://localhost:4200/ I get the following error

[vite] Internal server error: document is not defined
      at enableDismissTrigger (D:\dev\git-2.0\base-templates\angular\angular-bootstrap-5-base\node_modules\bootstrap\dist\js\bootstrap.esm.js:802:19)
      at eval (D:\dev\git-2.0\base-templates\angular\angular-bootstrap-5-base\node_modules\bootstrap\dist\js\bootstrap.esm.js:884:1)
      at async instantiateModule (file:///D:/dev/git-2.0/base-templates/angular/angular-bootstrap-5-base/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:9) (x6)

https://stackblitz.com/~/github.com/Chrispie/code-problems on my issue-creating-bootstrap-5-toaster-with-angular-17-standalone branch: enter image description here

I added my sample project where I have reproduced the error to my github repo.

Any idea as to what am I doing wrong here or what does it mean in this context?

For completeness sake I am outlining below what I have done.

I created a new angular project with scss and added the following 2 dependencies

npm i bootstrap
npm i @types/bootstrap --save-dev

A toast and a toaster component is added with a service and 2 models. The main app component has a few buttons to launch the toasts.

When running I am expecting it to look something like this

enter image description here

Solution

  • Seems like Server side rendering (SSR) with bootstrap does not work hand in hand. Not sure if there are a way to still use it with SSR.

    But for now I disabled SSR by following the steps on this site:

    • Rm main.server.ts
    • Rm server.ts
    • Rm src/app/app.config.server.ts
    • Remove these keys from architect in angular.json
    • "server": "src/main.server.ts", "prerender": false, "ssr": { ... }
    • Remove these from tsconfig.app.json
      • files -> "src/main.server.ts"
      • types: [ "node" ] becomes "types": []
    • npm uninstall @angular/ssr express @angular/platform-server
    • npm uninstall -D @types/express @types/node

    I uploaded the solution to another branch called issue-creating-bootstrap-5-toaster-with-angular-17-standalone-resolved if it might help anyone.