'Dualboot Angular13 and Angular1: cannot downgrade injectable services with parameters

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.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source