Skip to content
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

Module 'ngRaven' 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. #529

Closed
mailmrmanoj opened this issue Mar 14, 2016 · 23 comments

Comments

@mailmrmanoj
Copy link

This is my order of files in karma.conf.js for running karma jasmine uint tests..

files: ['app/bower_components/jquery/dist/jquery.min.js',
'app/bower_components/angular/angular.min.js',
'app/bower_components/raven-js/dist/raven.js',
'app/bower_components/raven-js/plugins/angular.js'
]
Event though I included 'app/bower_components/raven-js/plugins/angular.js' I'm getting the error stating the module 'ngRaven' is not available.

@mcpawali
Copy link

+1

@mailmrmanoj
Copy link
Author

@mattrobenolt
Copy link
Contributor

Is there something actionable we can do here? I'm a bit confused. :)

@mattrobenolt
Copy link
Contributor

Oh, jk, I read the Stackoverflow. It works with the angular-raven package, but not ours.

@ekaram
Copy link

ekaram commented Mar 29, 2016

Per the current documentation, the sentry angular plugin should now work

https://docs.getsentry.com/hosted/clients/javascript/integrations/angular/

@jacobparra
Copy link

Might be the directory 'dist' missing in 'app/bower_components/raven-js/plugins/angular.js'?

According to docs [https://docs.getsentry.com/hosted/clients/javascript/integrations/angular/#bower] it should be:

<script src="/bower_components/raven-js/dist/plugins/angular.js"></script>

@merrickfox
Copy link

Following the documentation angular can't find the module for me. The stack overflow solution works for me though.

@benvinegar
Copy link
Contributor

Might be the directory 'dist' missing in 'app/bower_components/raven-js/plugins/angular.js'?

That would definitely do it.

If somebody here could provide me with a concrete example, I'd be glad to dig into this.

@RobertBaron
Copy link

@benvinegar https://plnkr.co/edit/S1Dk9t?p=preview this is a simple sample of the error,

Based on https://github.com/getsentry/raven-js/blob/master/docs/integrations/angular.rst
It says:
Note that this CDN build auto-initializes the Angular plugin.

But importing only that as the docs says throws an error, please check the log in the plnkr
[$injector:nomod] Module 'ngRaven' 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.

Maybe this is just a misinterpretation of the docs?

@mebibou
Copy link

mebibou commented Sep 9, 2016

Any news on this? I think the angular plugin only works for CommonJs, since this is actually never called when just including the file. Please fix so we can use the plugin

@mebibou
Copy link

mebibou commented Sep 9, 2016

Here is the simplest example following your integration page that does not work: https://plnkr.co/edit/M5nt6Y?p=preview

@benvinegar
Copy link
Contributor

benvinegar commented Sep 9, 2016

@RobertBaron @mebibou – in both examples you need to configure Raven before initializing your app. Plugins aren't initialized until Raven.install() is called.

This is in all the documentation examples, for example:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdn.ravenjs.com/3.6.1/angular/raven.min.js"></script>
<script>Raven.config('https://<key>@app.getsentry.com/<project>').install();</script>

Although it could be made more explicit that your application script (e.g. app.js) must come afterwards.

@mebibou
Copy link

mebibou commented Sep 9, 2016

Oh ok this actually goes against the Angular way where we usually do this kind of configuration in a module that would require ngRaven, but doing this way makes it impossible.

I think you should specify this in the documentation as it is not specified at all.

@RobertBaron
Copy link

+1

@Sija
Copy link
Contributor

Sija commented Sep 9, 2016

See #413, @benvinegar Is it ready to tackle?

@benvinegar
Copy link
Contributor

@Sija – given that people keep tripping up on this, I'm fine with merging. Though I'm worried about the case where someone might have declared Raven before Angular. But at least CDN users need to upgrade manually.

@ashgibson
Copy link

ashgibson commented Dec 15, 2016

Don't forget to add the bit in bold below

Raven
.config('https://@sentry.io/')
.addPlugin(Raven.Plugins.Angular)
.install();

@elincognito
Copy link

elincognito commented Jan 23, 2017

@theatrain besides that you need to add an override on your package.json if using gulp inject or anything similiar that includes packages dependencies onto your html automatically.
The following bellow was my fix since i use gulp-inject

    "overrides": {
        "raven-js" : {
            "main": [
                "dist/raven.js",
                "dist/plugins/angular.js"
            ]
        }
    },

@dansabin
Copy link

dansabin commented Feb 26, 2017

I found a good workaround for grunt as well since everything was uglified and minified:

My app.js looked like:

'use strict';

angular
  .module('sraApp', [
    'ngRaven'
  ]);

I made another file called raven.js

// redacted sensitive info
Raven
  .config('https://<code>@sentry.io/<myapp>')
  .addPlugin(Raven.Plugins.Angular)
  .install();

And in the index.html instead of inline scripts:

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/raven-js/dist/raven.js"></script>
<!-- endbower -->
<!-- Outside of auto-managed bower, but still inside compile -> vender.js -->
<script src="bower_components/raven-js/dist/plugins/angular.js"></script>
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/raven.js"></script>
<script src="scripts/app.js"></script>
<!-- endbuild -->

Now when I grunt build:dist which uglifies/minifies grunt will optimize my script so the plugin can be registered. Doing inline scripts won't cause the optimization so window.angular won't be right for the plugin to autoload itself.

Overall the flow is as follows (documentation is correct)

  • bring in angular
  • bring in raven
  • bring in raven/plugins/angular.js
  • config/addPlugin/install ngRaven but done properly to take into account uglification/minification

Also another thing to note that most configs can happen later (though you miss tags on any issues during bootstrap)

For example a heroku config loaded after the fact.

'use strict';

angular.module('sraApp')
  .run(function (Raven, HEROKU_APP_ID, HEROKU_APP_NAME, HEROKU_RELEASE_CREATED_AT, HEROKU_RELEASE_VERSION, HEROKU_SLUG_COMMIT, HEROKU_SLUG_DESCRIPTION, NODE_ENV) {
    Raven.setRelease(HEROKU_RELEASE_VERSION);
    Raven.setEnvironment(NODE_ENV);
    Raven.setTagsContext({
      release_date: HEROKU_RELEASE_CREATED_AT,
      git_commit: HEROKU_SLUG_COMMIT,
      slug_description: HEROKU_SLUG_DESCRIPTION,
      application: {
        name: HEROKU_APP_NAME,
        id: HEROKU_APP_ID,
      }
    });
  });

@xeroxoid
Copy link

xeroxoid commented May 3, 2017

Any update on this? Also got problems here with our karma test suite.

@ashconnell
Copy link

@xeroxoid We also had problems with this during karma tests and were able to get around it.

In our case we were skipping the Raven.config().addPlugin().install() routine in the test environment because we didn't want them to be sent to sentry.

The problem with that is raven-js doesn't do things "the angular way" with modules - and instead only registers the ngRaven module if you called Raven.config() with a DSN.

The addPlugin() method only registers the angular module if the config was setup correctly (eg with a defined DSN url).

To fix this, we made it so that Raven.config().addPlugin().install() is always run even on our test suite, we use our normal DSN url and then use the config.shouldSendCallback method to block sending to sentry in the test environment.

This allows raven-js to properly register the angular module.

Hope that helps!

@bradseefeld
Copy link

We're doing the same, but we pass a fake DSN in instead (this is for our dev env). Something like https://foobar@app.getsentry.com/1 works fine (raven appears to do some amount of enforcement on the properties of the URL, so the username must be present along with the path).

@kamilogorek
Copy link
Contributor

kamilogorek commented Jan 10, 2018

Closing due to long inactivity. This thread also contains few workarounds just in case. Please feel free to reopen this issue if it's still relevant in any way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests