How do you use angularjs upgraded components within an ngx-bootstrap Modal?

Question

I have a hybrid Angular app (Angular 8.2.14 and angularjs 1.8.0) that uses Valor Software's ngx-bootstrap (5.3.2) modals. I still have several components that are angularjs and are complicated enough that I can't just upgrade them real quick.

I have properly bootstrapped my app so that typically upgraded and downgraded components work as expected. There is one case that where this does not happen and I think it is because of how ngx-bootstrap's BsModalService creates components.

Given an Angular component TestModal with a definition like so:

@Component({ template: `
  <ng1-component [html]="ng1HtmlContent"></ng1-component>
` })
export class TestModal {
  public ng1HtmlContent: string;
}

And an angularjs component like so:

angular.
  module('common').
  directive('ng1Componnent', ng1Component);

ng1Component.$inject = ['$compile'];
function ng1Component ($compile) {
  return {
    restrict: 'E',
    scope: {
      html: '<'
    },
    template: '<div></div>',
    link: function ng1Component (scope, elem) {
      let childScope = null;

      scope.$watch('html', (html) => { 
        if (childScope) {
          childScope.$destroy();
        }

        childScope = scope.$new();
        // There is a lot more here I am just not including.

      });
  }
}

The modal is shown with code similar to this:

constructor(private readonly bsModalService: BsModalService) {}

public showTest(initialState: Partial<TestModal>): void {
  this.bsModalService.show(TestModal, { initialState });
}

If I place my ng1Component directly into the DOM instead of within a modal, the component is rendered as you'd expect. However, if use the ng1Component in the modal I get this error:

ERROR NullInjectorError: StaticInjectorError(AppModule)[$scope]: 
  StaticInjectorError(Platform: core)[$scope]: 
    NullInjectorError: No provider for $scope!

Apparently, the modal code is not getting inserted into the DOM in a place where the properly bootstrapped ng1Injector can provide a scope.

Has anyone else overcome this issue? If so, how did you go about it?

Answer 1

It looks like the problem is that the UpgradeComponent injector can not get the parent scope while attempting to upgrade the component. Diving into the UpgradeComponent code we encounter this code:

function UpgradeComponent(name, elementRef, injector) {
  // ... code removed for brevity

  // We ask for the AngularJS scope from the Angular injector, since
  // we will put the new component scope onto the new injector for each component
  var $parentScope = injector.get($SCOPE);
  this.$componentScope = $parentScope.$new(!!this.directive.scope);

  // ... code removed for brevity
}

When I checked the $parentScope while this is executing I see undefined. Interestingly the injectors were good, so the upgrade module does have the injector and the problem is simply that it can't find the parent scope.

My angularjs components all have isolateScopes, so I need a $scope, but I don't need the parents $scope. So my solution is to provide the $scope to the injector as a new instance off of the $rootScope. This looks like:

@Component({ template: `
  <ng1-component [html]="ng1HtmlContent"></ng1-component>
`,
  providers: [
    {
      deps: ['$injector'],
      provide: '$scope',
      useFactory: ($injector: Injector) => $injector.get('$rootScope').$new()
    }
  ]})
export class TestModal {
  public ng1HtmlContent: string;
}

I am not sure if this is the best solution, but it is the simplest solution I could conceive.