Error 'angular is not defined' while upgrading AngularJS1 component

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. 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="">"

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.

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

where have you included angularjs file?

Nidhin Joseph
– Nidhin Joseph

2019-10-05 00:31:33 +00:00
Commented Oct 5, 2019 at 0:31 — Nidhin Joseph
– Nidhin Joseph, Commented Oct 5, 2019 at 0:31

GregL · Accepted Answer · 2019-10-05 00:49:06Z

1

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

There were a few things missing.

You didn't actually include the AngularJS 1.x file.
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');

edited Oct 5, 2019 at 0:49

answered Oct 5, 2019 at 0:41

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Krishnan Over a year ago

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?

GregL Over a year ago

@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.

Krishnan Over a year ago

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...? stackblitz.com/edit/ng6hybrid-xvu8bw

Krishnan Over a year ago

thanks, the issue is resolved, now I'm able to load the controllers using Upgrades - stackblitz.com/edit/ng6hybrid-qzrovd

Krishnan Over a year ago

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? stackblitz.com/edit/ng6hybrid-c8h6uv

|

Collectives™ on Stack Overflow

Error 'angular is not defined' while upgrading AngularJS1 component

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related