Panel is grey with no UI

[DrewML]

To start with, thank you so much for building this awesome extension! It's really a huge improvement over batarang.

Having said that, I'm having issues with a manually-bootstrapped app not loading any of the UI-content in the sidebar (it's just a blank grey div, with one blank nested div inside it).

Issue occurs on OSX 10.9.5, in Chrome Stable, on Angular 1.3.0.

Here is a picture of the problem:

An example of the issue can be seen here: http://www.mapmyfitness.com/cms/acme/.

There are no exceptions being thrown in the console, both when the context is "top frame" and the frame for this extension.

The only strange thing I noticed is a repeatable call to console.warn in the console from Facebook's all.js whenever I press the button to open the extension. The warning is:

Received message of type object from http://www.mapmyfitness.com, expected a string all.js

Let me know if you need any further info. Happy to help.

[surfjedi]

+1 me too on safari and chrome

[DrewML]

@surfjedi Do you have a link to the site that the issue is happening with for you? I was planning on spending some free-time in the near future trying to debug the issue, and it'd be awesome if I had more than one site to test against.

[dmackerman]

Happening here as well. Chrome Version 40.0.2214.28 beta (64-bit)

[DrewML]

@dmackerman Do you have a link to the page you're experiencing the issue with, or any more detail than what you have provided?

[dmackerman]

Unfortunately, this is a local project. What else can I provide?

[DrewML]

@dmackerman Is your application manually bootstrapped? What version of AngularJS are you using? Operating System?

[dmackerman]

It is not manually bootstrapped. Angular 1.3.4. Mac OS X Yosemite

[ChaosDeSelva]

I am also getting this problem as well as a console log.
angular.js:3837 Uncaught ReferenceError: Showdown is not defined

[drewbeck]

Same problem here. I'm getting the behavior locally and on our dev server.

I'm getting a console error when I invoke the extension:

Uncaught Error: [$injector:unpr] Unknown provider: MovieRatingFactoryProvider <- MovieRatingFactory
http://errors.angularjs.org/1.3.0/$injector/unpr?p0=MovieRatingFactoryProvider%20%3C-%20MovieRatingFactory

That's a factory specific to our project. As far as I know we don't have any other issues with that code — app runs well, no errors.

@ChaosDeSelva is Showdown local to your project?

[ChaosDeSelva]

I looked into showdown more because it is local to the project. I solved my issue and this is working now. Someone included btford/angular-markdown-directive that was creating a new instance of Showdown. This plugin has a dependency that was showdown.js and they never required it in the project because they thought it was implied from the markdown plugin.

[DrewML]

I've been looking into this a bit locally (although I'm guessing that there is likely more than one issue causing this problem for people). So far, I've determined that the problem is due to the fact that my application performs a manual-bootstrap before the injected ng-inspector.js file has a chance to over-write/intercept the window.angular.bootstrap method.

However, when I defer bootstrapping my application for a few seconds as a test, I begin to get exceptions relating to the $injector for my app not being defined before ng-inspector begins to run invoke commands against it.

If anyone else reporting the issue can provide a link to a page that they're experiencing the issue with, it would be extremely helpful.

[DrewML]

Got closer to the solution for my particular problem (may not be the solution for everyone).

I was able to address the issue with my app bootstrapping before ng-inspector loads locally.

To fix, I first added "run_at": "document_start" to the manifest.json file for the Chrome extension.

Next, I changed the code in inject.js to add the ng-inspector.js script to the page the second the head becomes available:

    // Inject the bridge script
    function injectScript() {
        var inspectorScript = document.createElement('script');
        inspectorScript.type = 'text/javascript';
        inspectorScript.src = chrome.extension.getURL('/ng-inspector.js');
        document.head.appendChild(inspectorScript);
    }

    if (document.head) injectScript();
    else setTimeout(injectScript, 1);

and finally, in bootstrap.js, I removed the check for the document state before calling the bootstrap method:

if (document.readyState === 'complete') {
    bootstrap();
} else {
    window.addEventListener('load', bootstrap);
}

//changed to:

bootstrap()

After making the above changes, ng-inspector is now successfully intercepting the manual bootstrap method of angular. However, I am running into the issue now where this.$injector inside of NGI.App is undefined. I'm hoping @rev087 can provide some input or direction on what may be the problem there.

[DrewML]

I discovered the rest of my issue, and have managed to get ng-inspector working with my application.

After fixing the manual-bootstrapping issue above, I had to determine why ng-inspector was not able to locate the $injector for my application.

Although I've never seen it documented anywhere, it turns out it's a really bad idea to bootstrap your application with an element that is also going to be compiled (aka has a directive on it). In my application, the root node of the angular app (the node we pass into angular.bootstrap) also has a directive on it for the ui-router project.

These two lines in the angular source are what caused the issue for me:

element.data('$injector', injector);
compile(element)(scope);

First, angular was assigning the $injector property on my element (good). However, during the "compile" stage, the data properties attached to the element are lost (which means ng-inspector can't get a reference to injector for my application).

@rev087 If you're interested, I believe we could add some warnings around this. I don't know how common of a use-case it will be though.

I'll be submitting a PR shortly for the fix for window.angular.bootstrap not being intercepted.

[DrewML]

@caitp over at the Angular project helped discover what my issue was. It specifically had to do with bootstrapping with an element that has a directive on it that is using transclusion. angular/angular.js#10556

Oddly enough, once I fixed that up, the existing version of ng-inspector began to work again (even though it doesn't appear that the angular bootstrap method is being intercepted).