title: Getting Undefined. Implement with the following snippet: -> protractor + cucumber
body: <p>trying to convert my jasmine framework to cucumber framework, tried lot of options. but still getting below error</p>
  
  <p><strong>Command</strong></p>
  
  <pre><code>protractor protractor.conf.js --cucumberOpts.tags="@login" 
  </code></pre>
  
  <p>and also tired with yarn, but ended up with same error</p>
  
  <pre><code>yarn e2e
  </code></pre>
  
  <p><strong>Error</strong></p>
  
  <pre><code>warnings:
  1) Scenario: Login - Admin Login with 'VALID' UserName and Password - e2e/features/login.feature:6
     Step: Given I navigate to application - e2e/features/login.feature:7
     Message:
       Undefined. Implement with the following snippet:
         this.Given(/^I navigate to application$/, function (callback) {
           // Write code here that turns the phrase above into concrete actions
           callback(null, 'pending');
         });
  1 scenario (1 undefined)
  1 step (1 undefined)
  0m00.001s
  [09:17:59] I/launcher - 0 instance(s) of WebDriver still running
  [09:17:59] I/launcher - chrome #01 failed 1 test(s)
  [09:17:59] I/launcher - overall: 1 failed spec(s)
  [09:17:59] E/launcher - Process exited with error code 1
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! ir-backoffice@0.11.9 e2e: `ng e2e`
  npm ERR! Exit status 1
  </code></pre>
  
  <p><strong>feature file.</strong> </p>
  
  <p>login.feature</p>
  
  <pre><code>Feature: Login Regression Feature
    As a IR admin, I want to Login through IR Application
    So that Client can access application features
  
    @login
    Scenario:Login - Admin Login with 'VALID' UserName and Password
      Given I navigate to application
  </code></pre>
  
  <p><strong>and Step definition file</strong> </p>
  
  <pre><code>import { LoginDriver } from '../../drivers/login.driver';
  
  const loginDriver = new LoginDriver();
  import { browser } from 'protractor';
  import { defineSupportCode } from 'cucumber';
  
  
  defineSupportCode(({After, Given, Then, When}) =&gt; {
  
    Given(/^I navigate to application$/, function () {
     loginDriver.navigateByUrl();
    });
  
  });
  </code></pre>
  
  <p><strong>and protractor.config.ts</strong></p>
  
  <pre><code>    // Protractor configuration file, see link for more information
      // https://github.com/angular/protractor/blob/master/lib/config.ts
  
      // const { SpecReporter } = require('jasmine-spec-reporter');
  
      exports.config = {
        allScriptsTimeout: 11000,
        specs: [
          './e2e/features/*.feature'
        ],
        capabilities: {
          browserName: 'chrome',
          chromeOptions: {
            // args: [ "--headless", "--disable-gpu", "--window-size=1980,1080" ]
          }
        },
        directConnect: true,
        baseUrl: 'http://localhost:4200/',
        framework: 'custom',
        frameworkPath: require.resolve('protractor-cucumber-framework'),
        cucumberOpts: {
          require: ["./e2e/features/**/*.steps.js"],
          tags: [],
          strict: true,
          format: ["progress"],
          dryRun: false,
          // compiler: [ 'ts:ts-node']
          compiler: "ts:ts-node/register"
  
        }
      }
  
  ;
  </code></pre>
  
  <p>Here is my folder Structure </p>
  
  <p><a href="https://i.stack.imgur.com/vXm7G.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>I've spent 5-6 hours to find the solution, but I couldn't get through it</p>
  
  <p>Please help regarding, that would be greatly appreciated</p>