AngularJS, Node.js, node module 'phantom' ... Injection error, angularjs trying to load my directive + Suffix

Question

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

When I load the same page from another application using Node module 'phantom, it does not work with an 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 matches: Unknown provider: WidgetsProvider <- Widgets <- dashboardWeightTableWidgetDirective

Pay attention to the name of the directive. " dashboardWeightTableWidgetDirective". The directive is called and is mentioned everywhere in my code as " dashboardWeightTableWidget".

What happens is that it falls into this line in the 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 try to use this changed name to do what looks like an dependency injection. But this is a directive. Definition shown below.

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

Again, this happens when I try to make a page using phantom using the Node module that comes with this command: npm install phantom

My corresponding phantom code is as follows:

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 cannot figure out how to get into the client code of the boot page during a call to phantom rendering. If I could do this, I could go through the code and possibly see what broke during the rendering. If anyone knows this, I would be grateful for this answer. You know, "teach a person how 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

:

. . , , 3 , .

Unknown provider: WidgetsProvider <- Widgets <- dashboardWeightTableWidgetDirective

• , , dashboardWeightTableWidgetDirective. angular, . , dashboardWeightTableWidget, , "" . , "" .

• angular "" factory. , "dashboardWeightTableWidgetDirective" - . , . "" .

• ; "widgets" ​​ , "let". - . , , phantomjs. - "var".

, - , , .