Javascript constructor from string variable in angular [duplicate]

Question

I've got a little angular (v1.5.11) app where I'm trying to instantiate an object from a string variable. This code used to work in my old setup but after changing from bower/gulp to webpack (3.8.1), I'm now getting the error below. I'm not sure whether this is caused by my new import statement or something.

A similar question (Javascript "Not a Constructor" Exception while creating objects) dicussed the problem but I wasn't able to get get any of the solutions to work in my example which is why I'm thinking it might be down to the import or the pojo structure itself?

Error:

TypeError: $window[iteratorType] is not a constructor

Code:

MyService.js

import ListIterator from './util/listiterator.pojo.js';

MyService.$inject = ['$log', '$window'];

function MyService($log, $window) {
  ...
  // this variable is obviously dynamic but for now I made it a static string
  var iteratorType = 'ListIterator';
  var iterator = new $window[iteratorType](); //<-- breaks as $window[iteratorType] is undefined
  //var iterator = new ListIterator();  <-- this works just fine
  ...

listiterator.pojo.js

var ListIterator = function() {
    this.executedIterations = 0;
    this.iter = null;
};
...
export default ListIterator;

You are importing ListIterator class in MyService file. Why don't you use this ListIterator class directly? — sphirate.thremer
– sphirate.thremer, Commented Nov 16, 2017 at 11:53
I've added an edit explaining that the answers in this question didn't help me solve my issue. — jimmy
– jimmy, Commented Nov 16, 2017 at 12:18
You used global function before. And switched to import. It's no longer available on window. And you already stated that var iterator = new ListIterator() works fine. It's unclear what the problem is. — Estus Flask
– Estus Flask, Commented Nov 16, 2017 at 13:03
@estus The line: var iterator = new $window[iteratorType](); doesn't work and creates the error above. The line after that is just to show that the function is available in general. — jimmy
– jimmy, Commented Nov 16, 2017 at 13:31
You can either expose functions you need to use there as globals like window.ListIterator = ListIterator (which doesn't look good), or switch from globals to idiomatic Angular alternatives, as one of the answer suggests. — Estus Flask
– Estus Flask, Commented Nov 16, 2017 at 14:22

Petr Averyanov · Accepted Answer · 2017-11-16 12:24:49Z

1

This is angular way:

app.factory('F1', function() {...})
app.factory('F2', function() {...})
app.factory('F3', function() {...})

app.factory('MyService', function($injector) {
  var name = 'F1';
  var someFactory = $injector.get(name);
})

answered Nov 16, 2017 at 12:24

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

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

2 Comments

jimmy Over a year ago

I'm not injecting an angular service, but just like to use a javascript constructor available in the global scope.

jimmy Over a year ago

I'm accepting this as the correct answer as it's a nicer way to rewrite my code.

scipper · Accepted Answer · 2017-11-16 11:58:16Z

1

If you don't want to change any of your code, you could tell webpack to provide your service. This will make it available under window scope:

rules: [{
    test: require.resolve('./util/listiterator.pojo.js'), //the correct absolute path
    use: [{
        loader: 'expose-loader',
        options: 'ListIterator'
      }
    ]
  }
]

This is untested with your example, but works fine in my setup with Highcharts and AngularJS.

EDIT

You have to install npm i -D expose-loader of course.

answered Nov 16, 2017 at 11:58

scipper

3,1813 gold badges27 silver badges43 bronze badges

1 Comment

jimmy Over a year ago

I'm fine with changing my code which is why I added the import statement that should basically end up doing the same just more local to this service in my opinion.

Collectives™ on Stack Overflow

Javascript constructor from string variable in angular [duplicate]

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related