Angular 6/7延迟加载模块，具有其他延迟加载模块所需的服务

Question

I have an angular application where i have a core module with several child modules as shown in the core-routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CoreComponent } from './components/core/core.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: 'app',
    component: CoreComponent,
    children: [
      { path: '', redirectTo: 'invoice', pathMatch: 'full' },
      { path: 'providers', loadChildren: '../providers/providers.module#ProvidersModule' },
      { path: 'invoice', loadChildren: '../invoice/invoice.module#InvoiceModule' },
      { path: 'expenses', loadChildren: '../expenses/expenses.module#ExpensesModule' }

    ],
    canActivate: [AuthGuard]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class CoreRoutingModule {}

In the expenses module i need to consume the observable i expose in the providersModule like its shown here

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ExpenseService } from '../expense.service';
import { ProvidersService } from 'src/app/providers/providers.service';
import { SelectItem } from 'primeng/api';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-expenses',
  templateUrl: './expenses.component.html',
  styleUrls: ['./expenses.component.css'],
})
export class ExpensesComponent implements OnInit, OnDestroy {
  serviceProviders: SelectItem[] = [];

  cols: any[];

  yearFilter: number;

  sliderTimeout: any;

  selectedRow;

  private subscription: Subscription;

  constructor(public expenseService: ExpenseService, private providerService: ProvidersService) {}

  ngOnInit() {
    this.cols = [
      { field: 'humanDate', header: 'Creation Date' },
      { field: 'serviceProviderName', header: 'Provider' },
      { field: 'invoiceId', header: 'Invoice ID' },
      { field: 'paymentOption', header: 'Payment Type' },
      { field: 'paymentTransactionId', header: 'Payment ID' },
      { field: 'amount', header: 'Amount' },
      { field: 'description', header: 'Description' },
    ];
    //setTimeout(() => this.getProviders(), 1000);
    this.getProviders();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  onRowSelect(expense) {
    this.expenseService.showDetailEvent.emit(expense);
  }

  onSliderChange(event, dt) {
    if (this.sliderTimeout) {
      clearTimeout(this.sliderTimeout);
    }

    this.sliderTimeout = setTimeout(() => {
      dt.filter(event.value, 'amount', 'gt');
    }, 250);
  }

  getProviders() {
    this.subscription = this.providerService.providers$.subscribe(providers => {
      this.serviceProviders = [];
      this.serviceProviders.push({ label: 'Provider', value: null });
      providers.map(provider => {
        this.serviceProviders.push({ label: provider.companyName, value: provider.id });
      });
    });
  }

  getName(event) {
    const label = this.serviceProviders.filter(x => x.value === event.serviceProviderName);
    if (label && label[0]) {
      return label[0].label;
    } else {
      return event.serviceProviderName;
    }
  }
}

when i first navigate to the expenses module, i see that the info from providers service is not there but when i navigate to another module (not necessarily the providers module) and then return to the expenses module, i can see the information.

I suppose i have a problem with the dependency injection but im not sure where

ps- i tried declaring the providers array with ProvidersService in the expenses module but it did not resolve the issue

Answer 1

You need to make a seperate module that exports your ProvidersService and then import it in both InvoiceModule and ExpensesModule modules. You are confusing a "page module" with a "utility" or "service" module.

I imagine you'd end up with ProviderServiceModule , ProvidersPageModule , InvoicePageModule and ExpensesPageModule

            +----------------------+
            |ProvidersServiceModule|
            +-----------+----------+
                        ^
       +----------------+----------------+
       |                                 |
+------+-----------+          +----------+--------+
|ExpensesPageModule|          |ProvidersPageModule|
+------------------+          +-------------------+

Answer 2

I resolved the issue using the following in my service

//providers$: Observable<Provider[]> = from([]);
  providers$: Subject<any[]> = new ReplaySubject<any[]>(1);