3

I have dual boot with Angular 13 and Angular 1. The app is built with webpack v5. The tsconfig has key "emitDecoratorMetadata":true. After install I run NGCC on the NPM dependencies.

I cannot use downgraded v13 service with constructor parameters inside the v1 components. The v13 services without constructor parameters are downgraded successfully.

  • MyService.ts:
@Injectable({providedIn: 'root'})
export class MyV13Service {
    constructor(@Inject('DomSanitizer') private sanitizer: any) {
    }
}
  • app.module.ts:
import angular from 'angular';
angular.module('MyV1Module', [
    ...
     ])
    .factory('MyV13Service', downgradeInjectable(MyV13Service))

@NgModule({
    imports: [BrowserModule,UpgradeModule],
    providers: [
        MyV13Service,
        {provide: 'DomSanitizer', useFactory: (i: any) => i.get('DomSanitizer'), deps: ['$injector']}
    ]
...
})
export class AppModule {...}

I tried also:

import {DomSanitizer} from '@angular/platform-browser';
@Injectable({providedIn: 'root'})
export class MyV13Service {
    constructor(private sanitizer: DomSanitizer) {
    }
}

and:

import {DomSanitizer} from '@angular/platform-browser';
@NgModule({
    imports: [BrowserModule,UpgradeModule],
    providers: [
        MyV13Service,
        {provide: DomSanitizer, useFactory: (i: any) => i.get('DomSanitizer'), deps: ['$injector']}
    ]
...
})
export class AppModule {...}

I tried also to import another dependency, like Restangular.
Everything without success. In all cases I receive an error:

Error: Error while instantiating injectable 'MyV13Service': This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid. This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator. Please check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.

WIDW?

[UPDATE]: when I provide my service this way (with HttpClient dependency):
providers:[{provide: MyV13Service, useFactory: (i: any) => i.get('MyV13Service'), deps: ['HttpClient']}]

The error changes to:

Error: Error while instantiating injectable 'MyV13Service': R3InjectorError(AppModule)[MyV13Service -> HttpClient -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
    at Object.factory (static.mjs:899:1)

When I add the HttpClient to the list of providers the error remains the same. Both HttpClient and DomSanitizer are not injectable.

[UPDATE]: the code is working when it is built with angular-cli. So, the problem here is in the webpack configuration.

mirik
  • 356
  • 4
  • 18
  • You should be able to simply inject DomSanitizer without overriding the provider, since it is already provided via BrowserModule, and doesn't come from AngularJS. In short, "constructor(private sanitizer: DomSanitizer)" should be correct, if you remove the provider in your module. – Mads K May 03 '22 at 09:31
  • I tried it. It doesn't work. What does it mean "if you remove the provider in your module"? – mirik May 03 '22 at 11:52
  • Within @NgModule, you've defined an AngularJS style provider for DomSanitizer. It starts with "{provide: DomSanitizer, useFactory: ...". As you are depending on DomSanitizer with an Angular service (and not an AngularJS service), you do not need to define such a provider. – Mads K May 03 '22 at 12:40
  • When I define providers as `providers:[MyV13Service]` it fails with the same error `This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid`. – mirik May 04 '22 at 09:12

0 Answers0