AngularJS，Node.js，节点模块'phantom'...注入错误，angularjs试图加载我的指令+后缀

Question

When I load an AngularJS page it loads fine. No console errors. Content shows as expected.

When I load the same page from another app, using Node module 'phantom' it fails with error:

Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=WidgetsProvider%20%3C-%20Widgets%20%3C-%20dashboardWeightTableWidgetDirective

From the angular site this link equates to: Unknown provider: WidgetsProvider <- Widgets <- dashboardWeightTableWidgetDirective

Please notice the directive name. " dashboardWeightTableWidgetDirective ". The directive is named, and referred to everywhere in my code as: " dashboardWeightTableWidget ".

What is happening is that it is hitting this line in angular.js file:

$CompileProvider.$inject = ['$provide', '$$sanitizeUriProvider'];
function $CompileProvider($provide, $$sanitizeUriProvider) {
  var hasDirectives = {},
      Suffix = 'Directive',
      COMMENT_DIRECTIVE_REGEXP = /^\s*directive\:\s*([\w\-]+)\s+(.*)$/,
      CLASS_DIRECTIVE_REGEXP = /(([\w\-]+)(?:\:([^;]+))?;?)/,
      ALL_OR_NOTHING_ATTRS = makeMap('ngSrc,ngSrcset,src,srcset'),
      REQUIRE_PREFIX_REGEXP = /^(?:(\^\^?)?(\?)?(\^\^?)?)?/;

and then trying to use that altered name to do what looks like a dependency injection. But this is a directive. Definition showing below.

angular.module('directives')
    .directive('dashboardWeightTableWidget', function (Data, Widgets, $interval, $window, $q) {

Again, this only happens when I am trying to render the page through phantom, using the node module that comes with this command: npm install phantom

My relevant phantom code looks like this:

const phantom = require('phantom');
let _ph;

exports.initPhantom = function() {
    phantom.create().then(ph => {
        _ph = ph;
 })
}

exports.processPage = function(conf) {
    return new Promise(function (resolve, reject) {
    console.log("creating phantom page ...");

    let _page, _interval, _pageReady;
    let _outObj = _ph.createOutObject();

    return _ph.createPage().then(function (page) { ....
        return _page.open(conf.options.viewerUrl);
    }).then (function(){
        setTimeout(() => {
              return _page.render(conf.options.filePath).then(function (status)                                                                       {
                   page.close();
              })

...

One additional comment: I can't figure out how to get into the loading page client-side code during the phantom render call. If I could do that, then I could step through the code and possibly see what is broken during the rendering. If anyone knows this, I would be grateful for that answer too. You know, "teach a man to fish".

let processPage = function(conf) {

  return new Promise(function (resolve, reject) {
    let instance = null;
    let phInstance = null;
    let reportPage = null;
    console.log("creating phantom page ...");

    let _outObj = _ph.createOutObject();

    return _ph.createPage()
      .then(function (page) {
        reportPage = page;
        _outObj.urls = [];
        _outObj.pageReady = false;

        page.property("customHeaders", {
          "Authorization": conf.options.authorization
        });
        page.property("paperSize", {
          //format: "Letter",
          format: "A4",
          margin: {
            top: '0.75in',
            left: '0.52in',
            bottom: '0.75in',
            right: '0.52in'
          }
        });
        page.property('setting', {
          resourceTimeout: 60000, // times out after 1 minute
          javascriptEnabled: true,
        });
        page.on('onConsoleMessage', function (msg, out) {
          console.log("on console msg ");
          console.log(msg);
          // should be 0 when page Widhgets are all loaded
          var loaded = msg.indexOf('getSeriesLoadingCount') > -1 ? true : false;
          if (loaded) {
            console.log('Message from console: ', msg, loaded);
            out.pageReady = true;
            _outObj = out;
          }
        }, _outObj);
        page.on('onResourceRequested', function (requestData, networkRequest, out) {
          // console.log('Request ' + JSON.stringify(requestData, undefined, 4));
          out.urls.push(requestData.url);
        }, _outObj);
        page.on("onError", function (msg, trace) {
          console.log("Error recorded: ", msg);
          trace.forEach(function (item) {
            console.log('  ', item.file, ':', item.line);
          });
        });
        page.on("onResourceError", function (resourceError) {
          page.reason = resourceError.errorString;
          page.reason_url = resourceError.url;
          console.log("Resource Error:", resourceError.errorString);
          console.log("Resource Url:", resourceError.url);
        });
        return page.open(conf.options.viewerUrl);

      })
      .then((status) => {
        let _pageReady = false;
        let _nbTrials = 0;
        // this setInterval loop is here to cycle through and check for the page being ready. It uses the PhantomJS event
        // property called 'onConsoleMessage'. This setting can be found above. It is a listener. In that listener we are
        // watching for a string that has a value of 'getSeriesLoadingCount' when the listener sees this text, it sets the
        // pageReady value to true. then this loop lets the code inside run. Primarily the rendering of the page to a file
        // in the temp directory of the server.
        _interval = setInterval(() => {
          _outObj.property('pageReady').then(function (ready) {
            if (ready === true) {
              clearInterval(_interval);
              return reportPage.render(conf.options.filePath).then(function (status) {
                reportPage.close();
                if (status) {
                  console.log('viewerUrl', conf.options.viewerUrl);
                  resolve(conf);
                } else {
                  console.log("cannot render page");
                  reject(conf);
                }
              });
            } else {
              ++_nbTrials;
              // 2 minutes
              if (_nbTrials >= 40) {
                return reject("too long generating the report");
              }
            }
          });
        }, 300);
      })
      .catch(error => {
        console.log("MAIN CATCH ERROR");
        console.log(error);
        reject(error);
      });
  });
}

Answer 1

Self Answer:

Ultimately I had a file inclusion issue. Which is really inconsequential at this point. I do think, however, there are 3 points worthy of taking away from my journey.

Unknown provider: WidgetsProvider <- Widgets <- dashboardWeightTableWidgetDirective

1. I thought this error was telling me I had a problem with dashboardWeightTableWidgetDirective. To angular that is where the error is occurring. But what this error is actually telling me is that I have an error in the dashboardWeightTableWidget directive, and the error is that it cannot find the provider "Widgets". Therefore, the actual problem was a bug in the file that was providing "Widgets".

2. As a part of the internal workings of angular, it adds the suffix "Directive" to every directive for internal tracking for it's directive factory. When my directive was failing, it did actually have the value "dashboardWeightTableWidgetDirective" due to this internal functionality. Thus the report. But what I had to fix was the "Widgets" part.

3. As an added piece of information; the file "widgets" load was failing on the variable declarations using "let". Something about the phantomjs headless browser could not deal with that instantiation. Thus my code working properly in the headed browser, but not when called by phantomjs. Ultimately the problem was solved by setting all my variable instantiations back to "var".

I hope this saves someone from the countless hours I gave away trying to find this error.