Error: [$injector:unpr] Unknown provider - while migrating AngularJS1 to Angular6

Question

I'm trying to do upgrade components written in AngularJS1 to Angular6. I'm taking the approach of having the wrappers for all the existing AngularJS1 component by extending "UpgradeComponent" placed under the folder "directive-wrappers" in my example.

while loading the application I get the console error as

Error: [$injector:unpr] Unknown provider: testDirective2DirectiveProvider <- testDirective2Directive
https://errors.angularjs.org/1.7.8/$injector/unpr?p0=testDirective2DirectiveProvider%20%3C-%20testDirective2Directive
    at eval (angular.js:138)
    at eval (angular.js:4924)
    at Object.getService [as get] (angular.js:5084)
    at eval (angular.js:4929)
    at Object.getService [as get] (angular.js:5084)
    at Function.UpgradeHelper.getDirective (upgrade_helper.ts:56)
    at new UpgradeHelper (upgrade_helper.ts:52)
    at TestDirective2Wrapper.UpgradeComponent (upgrade_component.ts:106)
    at new TestDirective2Wrapper (TestDirective2Wrapper.ts:27)
    at createClass (provider.ts:265) "<app-root _nghost-c0="">"

To mimic the same application online I have created the same angularjs directives and its wrappers in stackblitz

Answer 1

There's an issue with the docsSampleDirective.js file.

You've initialized the AngularJS Module there for the second time when you already initialized the testApp module in the app.module.js file. Just get rid of the dependency array from there:

angular
  .module("testApp")
  .controller("Controller", [
    "$scope",
    function($scope) {
      $scope.customer = {
        name: "Naomi",
        address: "1600 Amphitheatre"
      };
    }
  ])
  .directive("docsSimpleDirective", function() {
    return {
      template: "Name: {{customer.name}} Address: {{customer.address}}"
    };
  });

---

Here's a Working Sample StackBlitz for your ref.