Angular from app to universal

I have old angular app, client side render (CSR), and I want restyling with bootstrap look without force client to download heavy boundle.

Step by step I generate new angular app (CSR), test it then, if all ok, move to server side render (SSR).

documentation & inspiration

official angular universal
techniques and concepts surrounding SSR to understand (CSR) and (SSR)
on Medium, step-by-step realy well explained
example on angular-university

Angular install:

create a new dir for test my-universal-dir it is not important, and add angular, not global, and generate new project uni-t01:

$ mkdir my-universal-dir
$ cd my-universal-dir
: /my-universal-dir$ npm install @angular/cli
: /my-universal-dir$ ng new uni-t01
: /my-universal-dir$ cd uni-t01
: /new uni-t01$ ng serve   /* or npm start */

If all is ok we can see default app-page:

photo

we add universal pack:

: /new uni-t01$ ng add @nguniversal/express-engine

I add script to test time server render

<script>
    const po = new PerformanceObserver((list) => {
      for (const entry of list.getEntriesByName('first-contentful-paint')) {
        console.log('FCP: ', entry.startTime);
        po.disconnect();
      }
    });
    po.observe({type: 'paint', buffered: true});
  </script>

test client (CSR):

$ npm start     /* FCP:  257.6799999224022 */

and dev test (SSR) port 4200:

$ npm run dev:ssr.   /* FCP:  90.47499997541308 second reload */

add bootstrap package

$ npm install bootstrap

and modify /src/styles.scss

@import "../node_modules/bootstrap/scss/bootstrap";

add in my app-page test code

<h1>Bootstrap test</h1>    
<br>    
<br>    
<span class="badge rounded-pill bg-primary">Primary</span>    
<span class="badge rounded-pill bg-secondary">Secondary</span>    
<span class="badge rounded-pill bg-success">Success</span>    
<span class="badge rounded-pill bg-danger">Danger</span>    
<span class="badge rounded-pill bg-warning text-dark">Warning</span>    
<span class="badge rounded-pill bg-info text-dark">Info</span>    
<span class="badge rounded-pill bg-light text-dark">Light</span>    
<span class="badge rounded-pill bg-dark">Dark</span> 

and test (CSR)

$ npm run start     /* FCP:  272.9049999034032 */

and (SSR)

$ npm run dev:ssr    /* FCP: 358.6450000293553 second reload */