title: Angular4 + Protractor + Cucumber + TypeScript + weback-dev-server - Angular not found
body: <ul>
  <li>OS: macOS Sierra 10.12.4</li>
  <li>Node: v7.9.0</li>
  <li>Npm: 5.0.3</li>
  <li>Cucumber-js: 2.3.0</li>
  <li>Protractor: 4.0.14</li>
  <li>TypeScript: 2.2.2</li>
  <li>webpack-dev-server: 2.4.5</li>
  </ul>
  
  <p>i have a problem with running e2e tests. When I try to get an element from the page:</p>
  
  <pre><code>const el = browser.findElement(by.id('app-name'));
  el.getText().then(function (text) {
      console.log(text);
      callback();
  });
  </code></pre>
  
  <p>using 'browser' I get this error:</p>
  
  <pre><code>&gt; test-app@0.0.1 bdd:test /Users/p24/PhpstormProjects/alex-angular2
  &gt; node ./node_modules/.bin/protractor
  
  (node:28198) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
  [13:03:31] I/hosted - Using the selenium server at http://selenium-standalone-chrome:4444/wd/hub
  [13:03:31] I/launcher - Running 1 instances of WebDriver
  Feature: : adding an advertisement
  
    @web-test
    Scenario: : adding new advertisement
    ✔ Given I am on the main page
    ✔ When I click the add advertisement button
    ✖ Then I should see the form to add an advertisement
  
  Failures:
  
  1) Scenario: : adding new advertisement - features/adding_advertisement.feature:5
     Step: Then I should see the form to add an advertisement - features/adding_advertisement.feature:8
     Step Definition: features/step_definitions/advertisement.ts:32
     Message:
       Error: function timed out after 5000 milliseconds
           at Timeout._onTimeout (/Users/p24/PhpstormProjects/alex-angular2/node_modules/cucumber/lib/user_code_runner.js:91:22)
           at ontimeout (timers.js:386:14)
           at tryOnTimeout (timers.js:250:5)
           at Timer.listOnTimeout (timers.js:214:5)
  
  1 scenario (1 failed)
  3 steps (1 failed, 2 passed)
  0m05.026s
  Cucumber HTML report report/html/cucumber_report_hierarchy.html generated successfully.
  Modified files: 
  [13:03:47] E/protractor - Could not find Angular on page http://alex.local/ : retries looking for angular exceeded
  [13:03:47] E/launcher - Angular could not be found on the page http://alex.local/. If this is not an Angular application, you may need to turn off waiting for Angular. Please see https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular-on-page-load
  [13:03:47] E/launcher - Error: Angular could not be found on the page http://alex.local/. If this is not an Angular application, you may need to turn off waiting for Angular. Please see https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular-on-page-load
      at /Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/built/browser.js:506:23
      at ManagedPromise.invokeCallback_ (/Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:1379:14)
      at TaskQueue.execute_ (/Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2913:14)
      at TaskQueue.executeNext_ (/Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2896:21)
      at asyncRun (/Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2775:27)
      at /Users/p24/PhpstormProjects/alex-angular2/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:639:7
      at process._tickCallback (internal/process/next_tick.js:109:7)
  [13:03:47] E/launcher - Process exited with error code 199
  npm ERR! code ELIFECYCLE
  npm ERR! errno 199
  npm ERR! test-app@0.0.1 bdd:test: `node ./node_modules/.bin/protractor`
  npm ERR! Exit status 199
  npm ERR! 
  npm ERR! Failed at the test-app@0.0.1 bdd:test script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     /Users/p24/.npm/_logs/2017-06-10T11_03_47_694Z-debug.log
  </code></pre>
  
  <p>Here is my webpack.config:</p>
  
  <pre><code>'use strict';
  
  const HtmlWebpack = require('html-webpack-plugin');
  const path = require('path');
  const webpack = require('webpack');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const extractPlugin = new ExtractTextPlugin({
     filename: 'main.css'
  });
  const CleanWebpack = require('clean-webpack-plugin');
  
  const rootDir = path.resolve(__dirname);
  
  module.exports = {
      devServer: {
          contentBase: path.resolve(rootDir, 'dist'),
          port: 3000,
          host: '0.0.0.0',
          disableHostCheck: true,
          public: '172.23.0.1'
      },
      watchOptions: {
          poll: true
      },
      devtool: 'source-map',
      entry: {
          "bundle": "./src/webpack.main.js",
          "plugins": "./src/plugins.js"
      },
      output: {
          path: path.resolve(__dirname, "dist"),
          filename: "[name].js",
          // publicPath: "/dist"
      },
      resolve: {
          extensions: [ '.js', '.ts' ]
      },
      module: {
          exprContextCritical: false,
          rules: [
              {
                  test: /\.html$/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              name: '[name].[ext]'
                          },
                      },
                      { loader: 'extract-loader' },
                      { loader: 'html-loader' }
                  ],
                  exclude: path.resolve(__dirname, 'src/index.html')
              },
              {
                  test: /\index.html$/,
                  loader: ['html-loader']
              },
              {
                  test: /\.ts$/,
                  loader: 'ts-loader',
                  exclude: /node_modules/
              },
              {
                  test: /\.(scss|css)$/,
                  use: extractPlugin.extract({
                      use: ['css-loader', 'sass-loader']
                  })
              },
              {
                  test: /\.(jpg|png|gif|eot|ttf|svg|woff|woff2)$/,
                  use: [{
                      loader: 'file-loader',
                      options: {
                          name: '[name].[ext]',
                          outputPath: 'img/',
                          publicPath: 'img/'
                      }
                  }]
              },
          ],
      },
      plugins: [
          new CleanWebpack(['dist']),
          extractPlugin,
          new HtmlWebpack({
              template: 'src/index.html'
          }),
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery",
              "window.jQuery": "jquery",
              "Tether": 'tether'
          })
      ],
  };
  </code></pre>
  
  <p>My protractor.config:</p>
  
  <pre><code>// Protractor configuration file, see link for more information
  // https://github.com/angular/protractor/blob/master/lib/config.ts
  
  exports.config = {
      seleniumAddress: 'http://selenium-standalone-chrome:4444/wd/hub',
  
      baseUrl: 'http://alex.local',
  
      capabilities: {
          browserName:'chrome'
      },
  
      framework: 'custom',
  
      frameworkPath: require.resolve('protractor-cucumber-framework'),
  
      specs: [
          './features/*.feature'
      ],
  
      cucumberOpts: {
          require: ['./features/step_definitions/*.ts'],
          tags: [],
          strict: false,
          format: ["pretty", "json:report/json/cucumber_report.json"],
          dryRun: false,
          compiler: ["ts:ts-node/register"]
      },
  
      onPrepare: function () {
          browser.manage().window().maximize();
      }
  };
  </code></pre>
  
  <p>And my step definition file where an error occurs:</p>
  
  <pre><code>'use strict';
  
  import {browser, element, by, By, $, $$, ExpectedConditions} from 'protractor';
  
  const chai = require('chai');
  const chaiAsPromised = require('chai-as-promised');
  
  chai.use(chaiAsPromised);
  const expect = chai.expect;
  
  const {defineSupportCode} = require('cucumber');
  
      defineSupportCode(function(context: any) {
  
          const Given = context.Given;
          const When = context.When;
          const Then = context.Then;
  
          Given('I am on the main page', function (callback: any) {
              browser.get('http://alex.local');
              callback();
          });
  
          When('I click the add advertisement button', function (callback: any) {
              callback();
          });
  
          Then('I should see the form to add an advertisement', function (callback: any) {
              const el = browser.findElement(by.id('app-name'));
              el.getText().then(function (text) {
                  console.log(text);
                  callback();
              });
          });
  
      });
  
      export {};
  </code></pre>
  
  <p>Everything is serve by the docker. docker-compose.yml:</p>
  
  <pre><code>version: '2'
  services:
    proxy:
      image: jwilder/nginx-proxy
      container_name: nginx-proxy-alex
      ports:
        - "80:80"
      volumes:
        - /var/run/docker.sock:/tmp/docker.sock:ro
    app:
       build: .
       command: npm run build
       environment:
         - NODE_ENV=development
         - VIRTUAL_HOST=alex.local
       volumes:
         - .:/usr/src/app
         - /usr/src/app/node_modules
       ports:
        - "8080:3000"
    selenium-chrome:
      image: selenium/standalone-chrome
      environment:
        - VIRTUAL_HOST=selenium-standalone-chrome
      ports:
        - "4444:4444"
  </code></pre>