Search code examples
angularjsangularng-upgradeangular-upgrade

Error 'angular is not defined' while upgrading AngularJS1 component

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?

Solution

  • 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');