json - ngx-spinner 图标未显示 Angular 13

Question

微调器在页面加载时出现，但是显示了加载文本，但未显示图标。我已按照文档进行操作，但似乎找不到问题。这是我在页面上看到的屏幕截图

package.json

"ngx-spinner": "^13.1.1",

Angular.json

    "styles": [
      "node_modules/ngx-spinner/animations/ball-scale-multiple.css",
      "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/css/reset.css",
      "src/css/styles.scss"
    ],

app.module.ts

   import { NgxSpinnerModule } from "ngx-spinner";
     import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
          
   imports: [
      NgxSpinnerModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

app.component.html

<ngx-spinner
  bdColor="rgba(51,51,51,0.8)"
  size="medium"
  color="#fff"
  type="ball-scale-multiple"
>
  <p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>

app.component.ts

 import { NgxSpinnerService } from 'ngx-spinner';

 constructor(private spinner: NgxSpinnerService){}

  ngOnInit(): void {

    /** spinner starts on init */
    this.spinner.show();

    setTimeout(() => {
      /** spinner ends after 5 seconds */
      this.spinner.hide();
    }, 5000);

  }

Answer 1

app.component.html

向 ngx-spinner 标记

添加了 [fullScreen] = "true"

<ngx-spinner
  bdColor="rgba(51,51,51,0.8)"
  size="medium"
  color="#fff"
  type="ball-scale-multiple"
  [fullScreen] = "true"
>
  <p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>