angular: Can't resolve all parameters for .... This will become an error in Angular v6.x

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

I have 4 classes:

classes A, C and D are used as Services and correctly added to the providers list of my module. Class B is NOT used as a service.

Current behavior

Everything works fine but I got this warning:

Can’t resolve all parameters for ClassBService in /path/to/class-b.service.ts: ([object Object], ?). This will become an error in Angular v6.x

Expected behavior

Not sure if some action on my side is required or this warning should not be displayed.

Demo

Clone the repository, run npm install and then ng build --prod. You’ll see the warning.

https://github.com/ShinDarth/angular-test/

https://github.com/ShinDarth/angular-test/commit/4101bc56cd9f9a13915017ee40c6a90b51d363c5

Environment

Angular CLI: 1.7.4 Node: 8.10.0 OS: linux x64 Angular: 5.2.11 … animations, common, compiler, compiler-cli, core, forms … http, language-service, platform-browser … platform-browser-dynamic, router

@angular/cli: 1.7.4 @angular-devkit/build-optimizer: 0.3.2 @angular-devkit/core: 0.3.2 @angular-devkit/schematics: 0.3.2 @ngtools/json-schema: 1.2.0 @ngtools/webpack: 1.10.2 @schematics/angular: 0.3.2 @schematics/package-update: 0.3.2 typescript: 2.6.2 webpack: 3.11.0

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 11
  • Comments: 24 (6 by maintainers)

Most upvoted comments

If I can help someone… I solved my issue

I had this error. The problem for me was a missing @Inject.

I created an InjectionToken to pass a config to my Service from the forRoot, but I was missing the @Inject("myTokenName") in my Service.

So when building with --aot and --build-optimizer=true or --build-optimizer=false I had the warning!

After adding the @Inject problem solved!!

I had this issue because I am using generics to reduce code duplication. Here is my original code that was causing the warning:

@Injectable()
export abstract class MyBaseClass<S> {
  protected constructor(protected readonly service: S) {}
  
  // .. some code
}

Since this class is abstract it will never be injected anywhere, thus it should not be decorated with @Injectable(). Removing it makes compiler happy again.

If you need @Injectable then @Inject needs to be also provided - the solution proposed by @tonysamperi.

Having this problem too. Angular 7 complaining only when ng build is called with --prod / --aot. Its still a warning (not an error), but its annoying to have logged. I can also confirm that its different to the duplicate tickets marked above.

I had this issue because I am using generics to reduce code duplication. Here is my original code that was causing the warning:

@Injectable()
export abstract class MyBaseClass<S> {
  protected constructor(protected readonly service: S) {}
  
  // .. some code
}

Since this class is abstract it will never be injected anywhere, thus it should not be decorated with @Injectable(). Removing it makes compiler happy again.

If you need @Injectable then @Inject needs to be also provided - the solution proposed by @tonysamperi.

It works, when you remove injectable decorator, then your abstract/generic class compiles successfully. Thanks.

I confirm that the bug is still present using Angular 7, and it’ still saying:

This will become an error in Angular v6.x

Same or similar problem here except that the error occurs at runtime (no problems reported from the compiler).

We have an abstract base class which looks like that (excerpt):

export abstract class VerticalSplitComponent<TUpperComponent extends IViewComponent, TLowerComponent extends ISlaveViewComponent> extends CommonViewComponent implements AfterViewInit, OnDestroy {
	/** ctor. */
	constructor(private componentFactoryResolver: ComponentFactoryResolver, private changeDetector: ChangeDetectorRef) {
		super();
	}
}

From this class the following class is derived:

@Component({
    selector: 'app-currency-exrate-container-use-case',
    templateUrl: '../../../../../shared/components/vertical-split/vertical-split.component.html',
    styleUrls: ['../../../../../shared/components/vertical-split/vertical-split.component.less'],
})
export class CurrencyExchangeRateContainerComponent extends VerticalSplitComponent<CurrencyComponent, ExchangeRateComponent> {
	// no ctor.
}

This works with @angular-devkit/build-angular Version 0.802.2. After updating this package to 0.803.6 the following error occurs at runtime when starting the module which contains the CurrencyExchangeRateContainerComponent:

Uncaught (in promise): Error: Can't resolve all parameters for CurrencyExchangeRateContainerComponent

The solution for this problem: DI has to be performed on a class which has the @Component - Decorator!

So, after changing the code as follows, everything works.

Base class:

export abstract class VerticalSplitComponent<TUpperComponent extends IViewComponent, TLowerComponent extends ISlaveViewComponent> extends CommonViewComponent implements AfterViewInit, OnDestroy {
	/** ctor. - Now empty */
	constructor() {
		super();
	}
}

Derived class:

@Component({
    selector: 'app-currency-exrate-container-use-case',
    templateUrl: '../../../../../shared/components/vertical-split/vertical-split.component.html',
    styleUrls: ['../../../../../shared/components/vertical-split/vertical-split.component.less'],
})
export class CurrencyExchangeRateContainerComponent extends VerticalSplitComponent<CurrencyComponent, ExchangeRateComponent> {
	/** ctor. - Now with DI */
    constructor(private componentFactoryResolver: ComponentFactoryResolver, private changeDetector: ChangeDetectorRef) {
        super();
    }
}

I do not know if this “breaking change” is documented somewhere. It seems that it was introduced with the step from 0.802.2 > 0.803.6 of the package @angular-devkit/build-angular.

Result of ng --version:

Angular CLI: 8.3.6
Node: 10.16.0
OS: win32 x64
Angular: 8.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.6
@angular-devkit/build-angular     0.803.6
@angular-devkit/build-optimizer   0.803.6
@angular-devkit/build-webpack     0.803.6
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cli                      8.3.6
@angular/http                     7.2.15
@ngtools/webpack                  8.3.6
@schematics/angular               8.3.6
@schematics/update                0.803.6
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

I currently have the same issue with the following combination of classes:

export abstract class MyService {
  // .. some abstract members here
}

@Injectable()
export class MyServiceImpl implements MyService {
  public constructor(private _otherService: OtherService) {}
  // .. implementations for abstract members from MyService
}

export class MySpecialServiceImpl extends MyServiceImpl {
  public constructor(
    private _otherService: OtherService,
    private _someNumberSetting: number
  ) {} // warning here
}

The problem is that MySpecialServiceImpl inherits the @Injectable() annotation and there is no way to prevent this or opt-out of the DI mechanics at some point in your class hierarchy. The MySpecialServiceImpl will never be created by some injector, it’s only created manually.

Is there any other way to prevent this warning?

just FYI, the bug is still happening with:

Angular CLI: 7.0.6
Node: 10.13.0
OS: linux x64
Angular: 7.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.6
@angular-devkit/build-angular     0.10.6
@angular-devkit/build-optimizer   0.10.6
@angular-devkit/build-webpack     0.10.6
@angular-devkit/core              7.0.6
@angular-devkit/schematics        7.0.6
@angular/cli                      7.0.6
@ngtools/webpack                  7.0.6
@schematics/angular               7.0.6
@schematics/update                0.10.6
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1