Angularjs and Angular 8 hybrid and execute code micronization get Error: Can't resolve all parameters for xxx-service

Question

I have a difficult case which was organized from an old angularjs and angular8, besides it's was also limited in the extensive refactoring to resolve in code of micronization.And the code of angularjs cannot be changed.

In the end I choose the library ngx-planet that is closest to my situation, but i got this error

Issue:

When I then local run it, I get this error message.

I have tested this way of writing under angularjs and angular8 code without planet library, it can work, but after using planet, the aforementioned error occurred.

After searching, it was found that the reasons for this error message are known as the following 6 types:

1. Barrel index
2. Circularity dependency
3. Forgot to enable polyfills import'core-js/es6/reflect'
4. Injectable decorator incorrect usage (EX: missing @ or capital & lower case error etc...)
5. Tsconfig does not configure emitDecoratorMetadata
6. Decorate parameter type use any in your constructor

The first 5 have been excluded, I suspect it is the last, because of this Configuring Dependency Injection in Angular But I am confused, whether a certain configuration of planet causes parameter type to fail?

Code Structure:

1. There is a common service exported from angularjs

(File name: angular1-root-module.js)

(function () {

  angular.module('angular1', [
    'angular1.export-service'
  ]);

  angular.module('angular1.export-service', []);

  angular.module('angular1.export-service').factory('Angular1ExportService', Angular1ExportService);

  Angular1ExportService.$inject = [];

  function Angular1ExportService() {
    function outPutString() {
      return 'I from Angular1 export service string';
    }
    return {
      outPutAngular1String: outPutString,
    };
  }
})();

2. Inject into the class named Angular1InjectorService through the factory provider and depend on angularjs's $injector

export function Angular1InjectorServiceFactory(injector: any) {
  return new Angular1InjectorService(injector);
}

export const Angular1InjectorServiceProvider = {
  provide: Angular1InjectorService,
  useFactory: Angular1InjectorServiceFactory,
  deps: ['$injector']
};

@Injectable()
export class Angular1InjectorService {

  // I think probably this injector of type is any cause
  constructor(private angular1Injector: any) {
  }

  getService(serviceName: String) {
    return this.angular1Injector.get(serviceName);
  }
}

3. Then inject into the common AppBaseService

@Injectable()
export class AppBaseService {

  readonly angular1InjectorService: Angular1InjectorService;
  readonly testService: any;

  constructor(readonly injector: Injector) {
    this.angular1InjectorService = this.injector.get(Angular1InjectorService);
    this.testService = this.angular1InjectorService.getService('Angular1ExportService');
  }

  testGetAngular1String() {
    console.log('app base service is work!');
    return this.testService.outPutAngular1String();
  }
}

4. Then the service of the sub app inherits AppBaseService, and obtains the method that exists in angularjs

export class App1RootService extends AppBaseService {

  constructor(readonly injector: Injector) {
    super(injector);
  }

  GetLogAngular1String() {
    console.log('app1 root service is work!');
    return this.testGetAngular1String();
  }
}

5. Portal root planet config

    this.planet.registerApps([
      {
        name: 'app1',
        hostParent: '#app-host-container',
        routerPathPrefix: '/app1',
        selector: 'app1-root-container',
        resourcePathPrefix: '/static/app1',
        preload: settings.app1.preload,
        switchMode: settings.app1.switchMode,
        loadSerial: true,
        manifest: '/static/app1/manifest.json',
        scripts: [
          'main.js'
        ],
        styles: [
        ],
      }
    ]);

6. Sub app1 main config

defineApplication('app1', (portalApp: PlanetPortalApplication) => {
  return platformBrowserDynamic([
    {
      provide: PlanetPortalApplication,
      useValue: portalApp
    },
    {
      provide: AppRootContext,
      useValue: portalApp.data.appRootContext
    }
  ])
    .bootstrapModule(App1RootModule)
    .then(appModule => {
      return appModule;
    })
    .catch(error => {
      console.error(error);
      return null;
    });
});

Issue related resources:

EXCEPTION: Can't resolve all parameters

Uncaught Error: Can't resolve all parameters for

After upgrade Angular to v8: Can't resolve all parameters for Component:

Intact issue code:

Stackblitz

Github

I have not found an answer, and already have the official github open issue, but hope to get more help

Thanks.