Thanks to visit codestin.com
Credit goes to github.com

Skip to content

"Cannot set property '$inject' of undefined" with explicit es6 class annotation #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Kamilius opened this issue May 24, 2017 · 9 comments

Comments

@Kamilius
Copy link

Hi I'm having a module which has following look:

export default class ExampleClass {
  constructor(customService) {
    'ngInject';

    this.customService = customService;
  }
}

ErrorType.serviceName = 'ERROR_TYPE';

For some reason, in generated code, ExampleClass.$inject = ['customService']; appears before ExampleClass function definition.

@FjVillar
Copy link

The code seems fine for me and I can't reproduce it. Is this all your code?

@Kamilius
Copy link
Author

Kamilius commented May 30, 2017

Missing description, this code is being processed with karma-webpack, while running UnitTests.

When building it directly with Webpack, it looks 100% legit and totally works even minified. But when it is processed through karma-webpack (with exact same config passed), $inject appears before method in generated code, but not after it, which causes an error.

@FjVillar
Copy link

FjVillar commented Jun 2, 2017

Confirmed. I have already test some classes and with karma-webpack seems to not work properly. This is such a problem for us since we can't test our code using this plugin. @schmod can you enlight us on how to get a workaround or a fix for this?

@schmod
Copy link
Owner

schmod commented Jul 12, 2017

Would one of you mind pasting a copy of the code generated by karma-webpack here?

@joerideg
Copy link

joerideg commented Aug 3, 2017

I have the same problem, however I think it might be related to babel-istanbul-plugin:

/* my source code */
class RootCtrl {
  constructor(TopicService) {
    'ngInject';

    this.TopicService = TopicService;
  }

  $onInit() {
    this.TopicService.initialize();
    this.topic = this.TopicService.topic;
  }
}

export default RootCtrl;

/* My normal webpack output when running webpack-dev server */
class RootCtrl {
  constructor(TopicService) {
    'ngInject';

    this.TopicService = TopicService;
  }

  $onInit() {
    this.TopicService.initialize(); this.topic = this.TopicService.topic;
  }
}
RootCtrl.$inject = ['TopicService'];

/* When using babel-angularjs-annotate plugin and babel-istanbul-plugin */
RootCtrl.$inject = ['TopicService'];
class RootCtrl {
  constructor(TopicService) {
    'ngInject';

    cov_129uwns0e2.f[0]++;
    cov_129uwns0e2.s[0]++;
    this.TopicService = TopicService;
  }

  $onInit() {
    cov_129uwns0e2.f[1]++;
    cov_129uwns0e2.s[1]++;

    this.TopicService.initialize();
    cov_129uwns0e2.s[2]++;
    this.topic = this.TopicService.topic;
  }
}

/* When using only babel-angularjs-annotate plugin and no babel-istanbul-plugin */
"use strict";
class RootCtrl {
  constructor(TopicService) {
    'ngInject';

    this.TopicService = TopicService;
  }

  $onInit() {
    this.TopicService.initialize();
    this.topic = this.TopicService.topic;
  }
}

RootCtrl.$inject = ['TopicService'];

If I add the part in my babelrc file for the istanbul plugin it fails, if I remove the part the tests pass, however I obviously have no coverage :(.

{
  "plugins": ["angularjs-annotate"],
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": [
          "last 1 Chrome versions",
          "last 1 Firefox versions",
          "last 1 Safari versions",
          "last 1 Edge versions"
        ]
      }
    }]
  ],
  "env": {
    "test": {
      "plugins": [
        ["istanbul", {
          "exclude": [
            "**/*.spec.js"
          ]
        }]
      ]
    }
  }
}

My error is not like the title of the issue its Uncaught ReferenceError: RootCtrl is not defined Since RootCtrl is obviously not defined before calling RootCtrl.$inject.

I hope this sheds some light on the issue?

@joerideg
Copy link

joerideg commented Aug 3, 2017

Actually I just realized I could NOT run angularjs-annotate on my test code, since its not minified. I can only run angularjs-annotate during a production build therefore solving my problem. Yay for me. I will leave my comment above though in case any one else realizes this same thing.

@FjVillar
Copy link

FjVillar commented Aug 3, 2017

@joerideg Actually, It's not reccomended to use angularjs-annotate in dev build since, at least for me, the watch feature of webpack gets really slowed down. So I only use angularjs-annotate plugin in build config too. Now I can't really help with this, my solution was to migrate Karma to Jest but, I think that if you just run your karma jasmine unit tests before minifying the code It should be fine. @Kamilius here are some non-tested workarounds or solutions for you now:

  1. Make another Karma config sibling of your build Karma config which dont use webpack preprocesor to run your tests before minification.
  2. Migrate to Jest (Its really great, less config and really such a fast test running solution)
  3. Break your brain trying to fit a solution that prevents the preprocess minification of webpack before running your tests.

This still not tests if the angularjs-annotate injects actually work. But at least you can run your test suites within your CI.

@schmod
Copy link
Owner

schmod commented Sep 26, 2017

I occasionally benchmark this plugin, and in my experience, I've found that it adds a negligible amount of overhead compared to what normally gets run via the AST parser or babel-preset-env. I do not recommend going out of your way to run your dev build and/or tests with a different configuration, and would encourage you to open an issue if this plugin is significantly degrading the performance of your builds.

In particular, I encourage you to run your tests against a build that resembles your production build as closely as possible.

@schmod
Copy link
Owner

schmod commented Sep 26, 2017

The fix added in v0.8.2 appears to have fixed the original problem reported by @Kamilius.

Please re-open this issue if you're still having problems!

@schmod schmod closed this as completed Sep 26, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants