javascript - Kan jag visa en komponent medan innehållet laddas? - Angular2+

Är det möjligt att ladda en komponent istället för loading... mellan <app-root> i index.html i ett Angular-projekt?

När Angular-appen laddas, om anslutningen är långsam osv. medan sidan laddas, kommer det som visas mellan <app-root></app-root>-taggarna i index.html-filen att visas på skärmen.

Jag vill placera en spinnare vid punkten så att det ser ut som att något händer i bakgrunden istället för att ha en tom vit skärm.

Här är koden för snurran:

.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid var(--pa-red);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--pa-red) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body {
  background: grey;
}

<div class="lds-ring">
  <div></div>
  <div></div>
  <div></div>
</div>

Om jag använder detta i den faktiska index.html-filen fungerar det faktiskt. Men om jag har detta som en komponent bland mina andra och laddar det med selektorn, dvs:

<app-root>
   <app-spinner></app-spinner>
</app-root>

Inget visas och den vita skärmen syns medan man väntar.

Finns det en lösning på detta?

Svar #1

Det finns ingen lösning, eftersom anledningen till att laddningen tar lång tid är att det laddar appmodulen. Parsningen av mallen görs här, så det du vill ha är helt enkelt inte möjligt. Angular ignorerar också allt inuti app-root-taggen.

Det enda sättet att göra det är bara vanlig HTML och CSS inne i index.html, eller kanske ta en titt på server-side rendering.

Du kan också försöka skapa en slags app-skal som laddar riktigt snabbt, och ha en spinnerkomponent som laddar däremellan.

Eller skapa två olika Angular-applikationer, en som bara är en spinner, och den andra som är själva appen. Din spinner kommer att laddas först och vara mycket snabb, och ersätts snabbt av huvudappen, detta är gulligt men inte alls trivialt, och kommer att ta ganska lång tid att implementera.

Sooo, jag håller fortfarande fast vid mitt ursprungliga svar, gör inte det, och använd bara vanlig HTML och CSS för att lägga till en spinner. Detta är det snabbaste och mest responsiva. Om du är orolig för SEO, kan du titta på SSR.

Svar #2

Det finns en bra lösning med HTML och CSS i den här artikeln av Tomas Trajan. Du kan lägga till denna CSS i huvudet på index.html eller i din styles.css-fil.

<style type="text/css">
  body, html {
    height: 100%;
  }
  .app-loading {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .app-loading .spinner {
    height: 200px;
    width: 200px;
    animation: rotate 2s linear infinite;
    transform-origin: center center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .app-loading .spinner .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
    stroke: #ddd;
  }
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }
</style>

och i index.html body lägg till

  <app-root>
    <!-- selector from app.component.ts -->

     <!-- loading layout replaced by app after startupp -->
     <div class="app-loading">
       <svg class="spinner" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke- 
         width="2" stroke-miterlimit="10"/>
       </svg>
     </div>

</app-root>

Här är länken till hela artikeln.

https://medium.com/@tomastrajan/how-to-style-angular-application-loading-with-angular-cli-like-a-boss-cdd4f5358554, du kan kolla där. Hoppas det var till hjälp.