Service not performing as singleton despite provided in root

Ionic Framework
1

Hi,

I am having a problem with my service not performing as a singleton. It is shared between a page and another component used in a separate page, however, the constructor within the service is performed when I open both pages, and the data between the two is not the same, presumably because there is a new instance of the service per page. I have looked through all the solutions to this issue but none have worked for me.

My code is below:

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

import { Observable, of, Subject, ReplaySubject, BehaviorSubject } from 'rxjs';

import { catchError } from 'rxjs/operators';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { environment } from 'src/environments/environment';

@Injectable({

providedIn: 'root'

})

export class ContentService { service code }

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

import data from '../../data/mock-cons.json';
import { ContentService } from '../services/content.service.js';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.page.html',
  styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {
  name: string;
  file: any;
  currentView = 'overview';

  constructor(public contentService: ContentService) {
    // this.name = data[0].name;
  }

  ngOnInit() {
    // this.contentService.returnCurrentFile();
    console.log(this.contentService.selectedFile);
  }

  changeView(view) {
    this.currentView = view;
  }
}


import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { LoadingController } from '@ionic/angular';
import { ContentService } from 'src/app/services/content.service';

@Component({
  selector: 'app-list-item',
  templateUrl: './list-item.component.html',
  styleUrls: ['./list-item.component.scss'],
})
export class ListItemComponent implements OnInit {

  @Input() data: any;
  currentFile: any;

  constructor(public loadingController: LoadingController, public contentService: ContentService) { }

  ngOnInit() {}

  async navigateToFile() {
    this.contentService.selectedFile = this.data;
    
  }
}


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ListPageModule } from './list/list.module';
import { ContentService } from './services/content.service';
import { CommonComponentsModule } from './common-components/common-components.module';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ListPageModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    ContentService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Any help with why my service is not persisting between components would be great!

Thanks

1 Like
2

I personally am not a fan of providedIn: 'root' because it prevents mocking, so I would try getting rid of it and seeing if anything changes.