1

I want to avoid having to import every service into all my Angular 4 components, so I created something like this

import * as UtilityService from '../../services/utility.service';

Instead of doing this 

import { AppStateService, InternalStateType } from '../services/appstate.service';
import { Logging } from '../services/utility.service';
import { AuthenticationService } from '../services/authentication.service';
import { DataService } from '../services/data.service';
import { Utils } from '../services/utility.service';
import { RouteProtectionService } from '../services/route-protection.service';
import { UrlManagementService } from '../services/url-managing.service';

So now I can accesss all the classes from any component by referencing UtilityService.Classname i.e. UtilityService.AppState, UtilityService.Authentication, etc.

 constructor(
  public appState: UtilityService.AppState,
  public utilities: UtilityService.Utils,
  public dataService: UtilityService.Data,
  private appInsightsService: UtilityService.AppInsights,
  private titleService: UtilityService.Titles) {
 }

Then inside utility.service.ts, I have this

export { AppState, InternalStateType } from './appstate.service';
export { Authentication } from './authentication.service';
export { Data } from './data.service';
export { RouteProtection } from './route-protection.service';
export { UrlManagement } from './url-managing.service';
export { AppInsightsService } from '@markpieszak/ng-application-insights';
export { Title } from '@angular/platform-browser';

It compiles fine in typescript, but when running the app, angular complains 

 Error: Can't resolve all parameters for Authentication: ([object Object], [object Object], ?, ?, ?).

I already specified the provider for each of them in the AppModule, and it works when I import the classes normally. So why can't I import a barrel of classes and use them in Angular dependency injection?

TetraDev
  • 16,074
  • 6
  • 60
  • 61
  • how are you injecting these `providers` into your module definition under providers array and update the module separation as well. – Aravind Aug 04 '17 at 23:43

2 Answers2

1

Normally this error is coming because of Circular Dependency. Without all source code information it's very difficult to identify the service , which are actually causing the circular dependency issue.

I would suggest add the service one by one in to the constructor and identify which service making this error and resolve it.

If you couldn't identify the issue or you need circular dependency , Resolve the dependency manually like below

import { Injector } from '@angular/core';
constructor( private injector: Injector) {
    this.myService = this.injector.get(MyService);
  }

or 

import { ReflectiveInjector } from '@angular/core';
 constructor() {

       var injector= ReflectiveInjector.resolveAndCreate([MyService]);
       let myservice=injector.get(MyService);
     }

You can understand about these injectors from the below link. Use Injector or Reflective Injector based on your need.

Difference between Reflective Injector and Injector in Angular

Jameel Moideen
  • 7,542
  • 12
  • 51
  • 79
1

If you open the developer console in your web browser, you will probably see an error like this:

(SystemJS) Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.)

The Angular glossary calls this type of re-exporting a 'barrel`.

A way to roll up exports from several ES2015 modules into a single convenient ES2015 module.

That 'barrel' is the technique that you are using to re-export your modules. Unfortunately, it can lead to circular dependencies.

The solution: remove the circular dependencies, as the associated GitHub issue here says.

Shaun Luttin
  • 133,272
  • 81
  • 405
  • 467