При использовании ng6-toastr-уведомлений выдается ошибка "Нет поставщика для ToasterComponent"

Я использую Angular 7 и устанавливаю приложение ng6-toastr-notifications по этой ссылке

Я добавил как можно больше этого кода. Это мой сокращенный файл app.module.ts:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations'

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
import { ToastrModule } from 'ng6-toastr-notifications'


import { JwtInterceptor, ErrorInterceptor } from './_helpers';

import { LogoffComponent } from './logoff/logoff.component';
import { ToasterComponent } from './_helpers/toaster/toaster.component'

@NgModule({
  declarations: [
    AppComponent,
    StocksComponent,
    LoginComponent,
    LoginHomeComponent,
    HomeComponent,
    NavComponent,
    RegisterComponent,
    LogoffComponent,
    ToasterComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatButtonModule,
    MatInputModule,
    MatCardModule,
    MatToolbarModule,
    FormsModule,
    ReactiveFormsModule,
    MatListModule,
    AppRoutingModule,
    ToastrModule.forRoot()
  ],
  providers: [
      { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
      { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]

})

Это код ToasterComponent.ts:

import { Component} from '@angular/core';
import { ToastrManager } from 'ng6-toastr-notifications'

@Component({
  selector: 'app-toaster',
  templateUrl: './toaster.component.html',
  styleUrls: ['./toaster.component.css']
})
export class ToasterComponent {

  constructor(public toastr: ToastrManager) { }
  showSuccess() {
    this.toastr.successToastr('This is success toast.', 'Success!');
  }

  show401Error() {
    this.toastr.errorToastr('invalid authentication credentials');
  }

Я не получаю ошибку компиляции с использованием кода Visual Studio. Я получаю сообщение об ошибке в окне консоли браузера Google Chrome, как показано ниже:

ERROR Error: StaticInjectorError(AppModule)[InjectionToken 
HTTP_INTERCEPTORS -> ToasterComponent]: 
  StaticInjectorError(Platform: core)[InjectionToken HTTP_INTERCEPTORS -> 
ToasterComponent]: 
    NullInjectorError: No provider for ToasterComponent! 

Вот ошибка.interceptor.ts import { Injectable } из '@angular/core';

import { ToasterComponent } from './toaster/toaster.component'
import { AuthenticationService } from '../_services';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService,
public toaster: ToasterComponent) {}

intercept(request: HttpRequest<any>, next: HttpHandler): 
Observable<HttpEvent<any>> {
    return next.handle(request).pipe(catchError(err => {
        if (err.status === 401 ) {
            // send message to the client

            // auto logout if 401 response returned from api
            this.authenticationService.logout();
            location.reload(true);
        }

        const error = err.error.message || err.statusText;
        return throwError(error);
    }))
}
}

1 ответ

Решение

Добавление инъекций в мой код избавило от ошибки:

import { Injectable } from '@angular/core';
import { Component} from '@angular/core';
import { ToastrManager } from 'ng6-toastr-notifications'

@Component({
  selector: 'app-toaster',
 templateUrl: './toaster.component.html',
  styleUrls: ['./toaster.component.css']
})
@Injectable({ providedIn: 'root' })
export class ToasterComponent {

  constructor(public toastr: ToastrManager) { }
  showSuccess() {
    this.toastr.successToastr('This is success toast.', 
'Success!');
  }

  show401Error() {
    this.toastr.errorToastr('invalid authentication 
   credentials');
  }
Другие вопросы по тегам