ngx-toastr creates and empty 'ng-component' elemnt

When trying to create some toasts, the rendered elements are like the following:

I’m trying to use ngx-toaster in a custom component.

Declaring module:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { ToastrModule } from 'ngx-toastr';

import { UrlsComponent } from './urls.component';
import { ToastComponent } from './toast.component';

import { AuthService } from './auth/auth.service';
import { AuthInterceptor } from './auth/auth.interceptor';

import { ExchangeService } from './exchange/exchange.service';
import { ExchangeApiService } from './exchange-api/exchange-api.service';

@NgModule({
    imports: [
        HttpClientModule,
        ToastrModule.forRoot({
            toastComponent: ToastComponent // added custom toast!
        })
    ],
    entryComponents: [ToastComponent],
    declarations: [
        UrlsComponent,
        ToastComponent
    ],
    exports: [
        UrlsComponent
    ]
})
export class ApiClientModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: ApiClientModule,
            providers: [
                {
                    provide: HTTP_INTERCEPTORS,
                    useClass: AuthInterceptor,
                    multi: true
                },
                AuthService,
                ExchangeService,
                ExchangeApiService,
                ToastComponent               
            ]
        };
    }
}

And the custom component:

import { Component } from '@angular/core';

import { ToastrService } from 'ngx-toastr';

@Component({
  template: ''
})
export class ToastComponent {

  constructor(private toastr: ToastrService) { }

  addLodingToast() {
    console.log('addLodingToast');
    this.toastr.info('Please wait ...', 'Loading Data', {
      disableTimeOut: true
    });
  }

  addErrorLodingToast() {
    this.addErrorToast('Error', 'Failed to load data.');
  }

  clearAllToasts() {
    this.toastr.clear();
  }
}

[scttcper]

You’re both missing BrowserAnimationsModule

[AminSaqi]

You are right. I’ve use it in an interceptor before and had no problem.

OK I’ve got the point. thank you.