在使用Angular8实现ngx-spinner时出现错误。

Question

在我的应用程序中实现ngx-spinner时，我遇到了以下错误。

Error::

ERROR NullInjectorError: StaticInjectorError(AppModule)[NgxSpinnerComponent -> NgxSpinnerService]: 
  StaticInjectorError(Platform: core)[NgxSpinnerComponent -> NgxSpinnerService]: 
    NullInjectorError: No provider for NgxSpinnerService!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:4200/main.43124f86d80c92a84b74.js:15749:25)

我下面解释一下我的代码。

report.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ReportsRoutingModule } from './reports-routing.module';
import { ReportsComponent } from './reports.component';
import { HeaderComponent } from './header/header.component';
import { SidenavComponent } from './sidenav/sidenav.component';
import { HomeComponent } from './home/home.component';

import { MatSidenavModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatBadgeModule } from '@angular/material/badge';
import { MatDialogModule } from '@angular/material/dialog';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatMenuModule } from '@angular/material/menu';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTableModule } from '@angular/material/table';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatPaginatorModule } from '@angular/material/paginator';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { OrdersComponent } from './orders/orders.component';
import { PivotOrdersComponent } from './pivot-orders/pivot-orders.component';
import {MatExpansionModule} from '@angular/material'
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { FilterPipe } from './filter.pipe';
import {MatSortModule} from '@angular/material/sort';
//import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
import { NgxSpinnerModule } from "ngx-spinner";

@NgModule({
  declarations: [ReportsComponent, HeaderComponent, SidenavComponent, HomeComponent, OrdersComponent, PivotOrdersComponent,FilterPipe],
  imports: [
    CommonModule,
    ReportsRoutingModule,
    MatSidenavModule,
    MatInputModule,
    MatExpansionModule,
    MatToolbarModule,
    MatMenuModule,
    MatIconModule,
    MatCheckboxModule,
    MatTabsModule,
    MatTableModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatSnackBarModule,
    MatListModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatFormFieldModule,
    MatGridListModule,
    MatSelectModule,
    MatDialogModule,
    MatBadgeModule,
    MatCardModule,
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatGridListModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatIconModule,
    MatDialogModule,
    MatButtonModule,
    MatPaginatorModule,
    NgxMatSelectSearchModule,
    MatSortModule,
    NgxSpinnerModule
   // NgxDaterangepickerMd.forRoot()
  ]
})
export class ReportsModule { }

我在应用程序中有一个报告模块，现在正在实施。下面我将解释我的组件。

report/home/home.componet.html：

<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="default" type="ball-spin-clockwise">  
                        <p style="color: white">Please Wait. </p>  
</ngx-spinner>

report/home/home.component.ts:

import { NgxSpinnerService } from "ngx-spinner";

所以，在我的主页组件中，我使用了这个模块，但在我的生产构建中它却报错了。请问有人可以帮我解决这个错误吗？

- subhra_edqart

---

本地系统运行良好，但在生产构建时出现错误。我还运行了 ng serve --prod --optimization=false 来检测此问题。但是当我仅运行 ng serve 时，它可以正常工作。这只是 dist 文件夹的错误。 - subhra_edqart

@prathameshk73：登录后我直接进入报告模块，在那里我有主页，然后它就出现了。 - subhra_edqart

清空你的 node_modules 并进行全新的 npm 安装。尝试使用 ng build --prod 命令进行构建。同时使用任何本地服务器从 dist 文件夹中提供文件服务。不要使用 ng serve --prod。 - prathameshk73

好的，我会做同样的事情。 - subhra_edqart

谢谢，我按照您的建议操作并降级了ngx-spinner版本。现在那个错误已经不存在了。 - subhra_edqart

Answer 1

将 ngx-spinner 版本降级至 8.0.0，以与 Angular 版本相匹配。

- mr. pc_coder