angular/angular-hint

Error when loading angular-hint with requirejs

clmath opened this issue · 7 comments

clmath commented

Our app is using requirejs to load angular and our dependencies. I tried to load angular-hint/dist/hint.js the same way we load angular-route and similar modules but I get an error in the console:

Uncaught TypeError: EventEmitter2 is not a function hint.js:1307

I am not sure how to solve this.

SomeKittens commented

What's your config look like? We compile dist/hint.js through Browserify, so that might be causing issues. What happens when you point to the root hint.js ?

nuclearwessel commented

It's a known issue with eventemitter2 exports (EventEmitter2/EventEmitter2/issues/146). I ran into the same issue using webpack in my environment.

manju-reddys commented

When I try using requirejs bellow error I see in the console

Error: Module name "src/modules/hintEmitter" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded


var e = new Error(msg + '\nhttp://requirejs.org/docs/errors.html#' + id);

my require config:

require.config({
    paths: {
        angular: MASHUPS.url.bower + '/angular/angular',
        uiRouter: MASHUPS.url.bower + '/angular-ui-router/release/angular-ui-router',
        ngComponent: MASHUPS.url.bower + '/ngComponent/dist/angular-component.min',
        ngHint: MASHUPS.url.bower + '/angular-hint/hint',
        angulartics: MASHUPS.url.bower + '/angulartics/src/angulartics',
        angularticsGa: MASHUPS.url.bower + '/angulartics-google-analytics/lib/angulartics-google-analytics',
        header: MASHUPS.url.bower + '/header/build/global.header',
        text: MASHUPS.url.bower + '/requirejs-text/text'
    },
    shim: {
        angular: {exports: 'angular'},
        uiRouter: {deps: ['angular']},
        ngComponent: {deps: ['angular']},
        ngHint: {deps: ['angular']},
        angulartics: {deps: ['angular']},
        angularticsGa: {deps: ['angular', 'angulartics']},
        header: {deps: ['angular']}
    },
    locale: 'en-us',
    urlArgs: 'bust=' + MASHUPS.version,
    deps: ['angular','app', 'ngComponent', 'ngHint'],
    waitSeconds: 30,
    callback: function(angular) {
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['app']);
        });
    }
});
SomeKittens commented

If someone else comes up with a solution, great, but for now I'm closing this issue as we use Browserify to build Angular Hint.

  • 👎2
adcoolguy commented

We got:

Uncaught TypeError: EventEmitter2 is not a constructor

So how to fix this issue?

SomeKittens commented

@adcoolguy I can't help you fix that issue without more information. Read up on asking a question.

codeuniquely commented

I have the same issue as @adcoolguy,

I've built my app using WebPack and ES2015, its all working for the most part (a few UI bugs that were not covered by the two and a half thousand tests)

I tracked one down to an issue with not injecting a required service in the controller that checks for the users rights so a UI toggle does not behave as expected.

Someone pointed me at angular-hint - and it appears that it would report on this sort of thing, so i included it.

I installed via NPM.

I updated my html template

<html ng-app="wcy" ng-hint lang="en">

I imported the module

import angular from 'angular';
import ngAnimate from 'angular-animate';
import ngHint from 'angular-hint';
import ngSanitize from 'angular-sanitize';
.
.
.

I referenced it in my app.

angular.module('wcy', [ngHint, ngAnimate, ngSanitize, uirouter, uiBootstrap, uiSelect, UserService])

Started the app

npm start

The app built and I then I did the usual and pointed chrome at the express server - and saw absolutely nothing...

Chrome console.

ncaught TypeError: EventEmitter2 is not a constructor(anonymous function) @ hintEmitter.js:10(anonymous function) @ bundle.js:899__webpack_require__ @ bundle.js:545fn @ bundle.js:76(anonymous function) @ hint.js:4(anonymous function) @ bundle.js:893__webpack_require__ @ bundle.js:545fn @ bundle.js:76(anonymous function) @ index.js:15(anonymous function) @ bundle.js:863__webpack_require__ @ bundle.js:545fn @ bundle.js:76(anonymous function) @ index.js:11(anonymous function) @ bundle.js:647__webpack_require__ @ bundle.js:545fn @ bundle.js:76(anonymous function) @ multi_main:2(anonymous function) @ bundle.js:575__webpack_require__ @ bundle.js:545(anonymous function) @ bundle.js:568(anonymous function) @ bundle.js:571
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module wcy due to:
Error: [$injector:nomod] Module 'wcy' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.0/$injector/nomod?p0=wcy
    at eval (webpack:///./~/angular/angular.js?:68:12)
    at eval (webpack:///./~/angular/angular.js?:2015:17)
    at ensure (webpack:///./~/angular/angular.js?:1939:38)
    at module (webpack:///./~/angular/angular.js?:2013:14)
    at eval (webpack:///./~/angular/angular.js?:4503:22)
    at forEach (webpack:///./~/angular/angular.js?:321:20)
    at loadModules (webpack:///./~/angular/angular.js?:4487:5)
    at createInjector (webpack:///./~/angular/angular.js?:4409:19)
    at doBootstrap (webpack:///./~/angular/angular.js?:1691:20)
    at bootstrap (webpack:///./~/angular/angular.js?:1712:12)
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=wcy&p1=Error%3A%20%…ootstrap%20(webpack%3A%2F%2F%2F.%2F~%2Fangular%2Fangular.js%3F%3A1712%3A12)