Cucumber Protractor times out after using then() o

I have an issue which description matches perfectly with I am not able to identify elements using protractor in angular 2 application but for me the problem is not fixed by adding # before the id value

Here is the code below:

When('I select my input box', (callback) => {

  let inputbox = element(by.css('#roomWidthInput'));
  console.log('inputBox promise set');

  var scrpt = "return document.getElementById('roomWidthInput');";
  browser.executeScript(scrpt).then(function (text) {
    console.log('info', 'Script is: ' + scrpt);
  });

  inputbox.isPresent().then(function(isElementVisible) {
    console.log('hello!');
    expect(isElementVisible).to.be.true;
    callback();
  });
});

The console logs:

inputBox promise set
info Script is: return document.getElementById('roomWidthInput');

and then it throws Error: function timed out after 5000 milliseconds.

I have also tried using by.id locator with exactly the same results.

Any help would be much appreciated, thanks.

Your issue has no matter with protractor can't find element, It's due to your step definition function execution time duration exceeded the default timeout: 5 secs.

You should change the default timeout as below:

Cucumber 3 and above

// supports/timeout.js
var { setDefaultTimeout } = require("cucumber");
setDefaultTimeout(60 * 1000);

Cucumber 2 above, but lower than Cucumber 3

// supports/timeout.js
var {defineSupportCode} = require('cucumber');

defineSupportCode(function({setDefaultTimeout}) {
  setDefaultTimeout(60 * 1000);
});

Cucumber 1 and lower

// supports/timeout.js
module.exports = function() {
    this.setDefaultTimeout(60 * 1000);
};

In protractor conf.js, add the timeout.js into cucumberOpts.require:

// set allScriptsTimeout to fix asynchronous Angular tasks to finish after 11 seconds
allScriptsTimeout: 600 * 1000, 

cucumberOpts: {     
   require: [
      "supports/timeout.js",
   ]
},

onPrepare: function() {
   // add this when page opened by browser.get() is not angular page
   browser.ignoreSynchronization = true;
}