1

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. I have written this application in my local and it works fine for 2 components TestDirectiveWrapper and TestDirective2Wrapper.

But when I include the third component TestDirective3Wrapper, while loading the application I get the console error as 

angular.min.js:127 Error: [$injector:unpr] http://errors.angularjs.org/1.7.5/$injector/unpr?p0=testDirective3DirectiveProvider%20%3C-%20testDirective3Directive
    at angular.min.js:7
    at angular.min.js:46
    at Object.d [as get] (angular.min.js:43)
    at angular.min.js:46
    at Object.d [as get] (angular.min.js:43)
    at Function.push../node_modules/@angular/upgrade/fesm5/static.js.UpgradeHelper.getDirective (static.js:872)
    at new UpgradeHelper (static.js:869)
    at TestDirective3Wrapper.UpgradeComponent (static.js:1170)
    at new TestDirective3Wrapper (TestDirective3Wrapper.ts:9)
    at createClass (core.js:9296) "<app-root _nghost-c0="">"

enter image description here

To mimic the same application online I have created the same angularjs directives and its wrappers in stackblitz, but here I'm getting a different error though.

enter image description here

Can anyone help me in resolving this issue and enable me to load all the 3 components?

Krishnan
  • 958
  • 5
  • 21
  • 44

1 Answers1

1

I had a play with this, and I managed to get it to work.

There were a few things missing.

  1. You didn't actually include the AngularJS 1.x file.
  2. You didn't import the original AngularJS app module file, or any of the directives.

Once I did those two things, it worked for me.

Here is the relevant code:

In app.module.ts:

import '../AngularJsApp/app.module'; // added

declare var angular: any; // added

angular
  .module('testApp')
  .directive('appRoot', downgradeComponent({ component: AppComponent }));

In AngularJsApp/app.module.js:

'use strict';

const angular = require('angular'); // added

// Define the `testApp` module
angular.module('testApp', []);

// added these 3 lines
require('./test-directive/test-directive.js');
require('./test-directive2/test-directive2.js');
require('./test-directive3/test-directive3.js');
GregL
  • 37,147
  • 8
  • 62
  • 67
  • I did the same changes listed by you here in my local, but I'm getting compilation exception as below: ERROR in ./src/AngularJsApp/app.module.js Module not found: Error: Can't resolve 'angular' in 'C:\..\NG6Hybrid\src\AngularJsApp' i ｢wdm｣: Failed to compile. any thing I'm missing here? – Krishnan Oct 05 '19 at 18:26
  • @Krishnan Did you check out my working StackBlitz example linked in my answer and compare it to your local code? It is possible I made other changes I did not call out explicitly in my answer. – GregL Oct 06 '19 at 23:00
  • I did compared your changes with my code, but couldn't spot any differences. Even If I add any new component I get the same error "Error: [$injector:unpr] Unknown provider".. Looks like I'm missing something here...? https://stackblitz.com/edit/ng6hybrid-xvu8bw – Krishnan Oct 08 '19 at 02:11
  • thanks, the issue is resolved, now I'm able to load the controllers using Upgrades - https://stackblitz.com/edit/ng6hybrid-qzrovd – Krishnan Oct 09 '19 at 13:58
  • When I try to add some controllers, I get the same error message. I tried adding studentController and homePageController, but not able to load it. Any ideas why I'm facing this issue? https://stackblitz.com/edit/ng6hybrid-c8h6uv – Krishnan Oct 13 '19 at 00:48
  • @Krishnan That is a separate question, so in future, ask a new question for follow up questions. That said, here is my best guess as to why that doesn't work. Using plain controllers like that outside of a directive is a very outdated pattern, even in AngularJS 1.x. I don't believe it is supported to upgrade controllers to Angular 2+, but I could be wrong. My understanding was you needed to have element based directives to upgrade them successfully. I would work on refactoring your AngularJS code first, then upgrading them. Good luck! – GregL Oct 15 '19 at 15:57
  • Ok thanks for your reply. actually my requirement is I don't want to touch my existing controllers, instead create a directive wrapper for the controller and do the upgrade.. let me know if it is possible with a example ? – Krishnan Oct 15 '19 at 22:32
  • https://stackoverflow.com/questions/58468481/how-to-create-wrapper-directives-for-controller-in-angularjs – Krishnan Oct 21 '19 at 02:55