Angular SSR: показывать счетчик во время загрузки компонента - PullRequest
Новая
       6

Angular SSR: показывать счетчик во время загрузки компонента

0 голосов
/ 29 марта 2020

Я знаю, чтобы показать анимацию во время загрузки для стандартной angular сборки с npm run build, поместив картинку в теги <app-root></app-root> индекса. html файл проекта.

Но при рендеринге на стороне сервера счетчик не отображается.

Я работаю над версией Angular 9.

Это код, который я использовал:

index. html: 

<!doctype html>
  <html lang="en">

  <head>
  <meta charset="utf-8">
  <title>My webApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<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: 300px;
    width: 300px;
    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: #22387B;
    }

    @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>
</head>

<body>

<app-root>
    <div class="app-loading">
    <div class="logo"></div>
    <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>
</body>

</html>

Возможно, мне нужно изменить app.server.module.ts ..

Я не нашел объяснений по этому вопросу.

Спасибо за помощь:)

...