Question

我知道通过将图片放在项目的index.html文件的npm run build标签中，可以在使用<app-root></app-root>进行标准角度构建的加载过程中显示动画。

但是在服务器端渲染中，未显示微调器。

我正在使用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 ..

我没有找到关于这个问题的解释。

感谢您的帮助：）

Angular SSR：在组件加载期间显示微调器

0 个答案: