Error: Fullpage.js can only be initialized once

Question

I followed the docs however I'm still getting this error in the console:

Fullpage.js can only be initialized once

Link to the docs: https://github.com/meiblorn/ngx-fullpage/wiki/Usage:-Angular-CLI-(Recommended)

app.module.js

import { MnFullpageModule } from 'ngx-fullpage';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MnFullpageModule.forRoot() // Don't forget to call .forRoot() static method
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.html

<div mnFullpage>
  <div class="section welcome-section fp-section fp-table">
    <div class="fp-tableCell">
      1
    </div>
  </div>
  <div class="section welcome-section fp-section fp-table">
    <div class="fp-tableCell">
      2
    </div>
  </div>
  <div class="section welcome-section fp-section fp-table">
    <div class="fp-tableCell">
      3
    </div>
  </div>
</div>

app.component.ts

import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { MyDataService } from './my-data.service';
import { MnFullpageOptions, MnFullpageService } from 'ngx-fullpage';

@Component({
  selector: 'app',
  providers: [MyDataService],
  templateUrl: './page-content.component.html',
  styleUrls: ['./page-content.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  single_post = ''; 
  posts = [];
  throttle = 300;
  scrollDistance = 50;
  no_of_post = 5;
  mnFullpageService: any;
  constructor(private newService: MyDataService, public fullpageService: MnFullpageService) {
      this.addItems(0, this.no_of_post);
      this.mnFullpageService = fullpageService;
  }


  ngOnInit() {

  }

ngOnDestroy() {
      console.log('destroying...');
      this.mnFullpageService.destroy('all');
}


  addItems(startIndex, endIndex) {
    for (let i = startIndex; i < endIndex; ++i) {
        this.newService.fetchData().subscribe(data=>{
           this.single_post = data[i];
           this.posts.push(this.single_post);
        }); 
    }
  }