NestJS lifecycle hook order — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Walk NestJS's bootstrap hook order</h1>
    <p class="pg-sub">
      This is a <b>model</b> of Nest's container bootstrap, not a running NestJS app — nothing here starts
      a real server. Toggle whether <code>ReportsService</code> actually injects <code>MetricsService</code>,
      then boot the graph and watch which order is <em>guaranteed</em> versus which one Nest has never promised.
    </p>

<div class="banner info">
      Simulated model — walks the documented dependency-injection guarantee in plain JS. No real NestJS app runs here.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px;">
        <div class="field">
          <span class="ctl-label">Does ReportsService inject MetricsService?</span>
          <div class="seg" id="edgeSeg">
            <button type="button" aria-pressed="false" data-val="no">No — reads a shared variable</button>
            <button type="button" aria-pressed="true" data-val="yes">Yes — constructor-injected</button>
          </div>
        </div>
        <div class="field">
          <span class="ctl-label">Simulate</span>
          <div class="seg" id="verSeg">
            <button type="button" aria-pressed="true" data-val="v11">Pre-v12 order</button>
            <button type="button" aria-pressed="false" data-val="v12">NestJS 12 order</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="run">▶️ Boot the app</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="buggy-v11">Preset: the bug, before the upgrade</button>
        <button class="btn sm" data-preset="buggy-v12">Preset: same bug, after upgrading to v12</button>
        <button class="btn sm" data-preset="fixed">Preset: fixed with real DI</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Bootstrap graph</div>
      <div class="graph" id="graph">
        <div class="node" data-node="cache"><span class="name">🗄️ CacheService</span><span class="hint-sm">no dependencies of its own</span></div>
        <div class="node" data-node="metrics"><span class="name">📈 MetricsService</span><span class="hint-sm">no dependencies of its own</span></div>
        <div class="edge-label" id="edgeLabel">CacheService → OrdersService: a real constructor-injection edge (always guaranteed)</div>
        <div class="node" data-node="orders"><span class="name">🧾 OrdersService</span><span class="hint-sm">injects CacheService</span></div>
        <div class="node" data-node="reports"><span class="name">📊 ReportsService</span><span class="hint-sm" id="reportsHint">reads a shared variable, not an injected dependency</span></div>
      </div>

<div class="status" id="statusLine">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — set the controls above and boot the app.</span>
      </div>
      <p class="hint" id="caption">Nothing has booted yet. Each box lights up as its onModuleInit runs.</p>

<div class="panel-label" style="margin-top:14px"><span class="n">3</span> Resulting onModuleInit order</div>
      <div class="order-row" id="orderRow"></div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.