Angular 2 - protractor(e2e) error “Cannot find nam

Question

After enter npm run protractor appera error

 Cannot find name 'protractor'

My package.json

{
  "name": "SMSCAdmin",
  "version": "0.0.1",
  "description": "Admin module for SMSC.",
  "author": "Bulktrade GmbH",
  "homepage": "https://github.com/bulktrade/SMSC",
  "license": "Apache-2.0",
  "scripts": {
    "build:dev": "webpack --config config/webpack.dev.js --progress --profile",
    "build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
    "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --bail",
    "build": "npm run build:dev",
    "ci": "npm run lint && npm test && npm run e2e",
    "clean:dist": "npm run rimraf -- dist",
    "clean:install": "npm set progress=false && npm install",
    "clean:start": "npm start",
    "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
    "docker": "docker",
    "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
    "e2e:live": "npm run e2e -- --elementExplorer",
    "e2e": "npm run protractor",
    "github-deploy:dev": "webpack --config config/webpack.github-deploy.js --progress --profile --github-dev",
    "github-deploy:prod": "webpack --config config/webpack.github-deploy.js --progress --profile --github-prod",
    "github-deploy": "npm run github-deploy:dev",
    "lint": "npm run tslint \"src/**/*.ts\"",
    "postversion": "git push && git push --tags",
    "prebuild:dev": "npm run clean:dist",
    "prebuild:prod": "npm run clean:dist",
    "preclean:install": "npm run clean",
    "preclean:start": "npm run clean",
    "pree2e": "npm run webdriver:update -- --standalone",
    "preversion": "npm test",
    "protractor": "protractor",
    "rimraf": "rimraf",
    "server:dev:hmr": "npm run server:dev -- --inline --hot",
    "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
    "server:prod": "http-server dist --cors",
    "server": "npm run server:dev",
    "start:hmr": "npm run server:dev:hmr",
    "start": "npm run server:dev",
    "test": "karma start",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "version": "npm run build",
    "watch:dev:hmr": "npm run watch:dev -- --hot",
    "watch:dev": "npm run build:dev -- --watch",
    "watch:prod": "npm run build:prod -- --watch",
    "watch:test": "npm run test -- --auto-watch --no-single-run",
    "watch": "npm run watch:dev",
    "webdriver-manager": "webdriver-manager",
    "webdriver:start": "npm run webdriver-manager start",
    "webdriver:update": "npm run webdriver-manager update",
    "webpack-dev-server": "webpack-dev-server",
    "webpack": "webpack"
  },
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular2-material/button": "2.0.0-alpha.8-2",
    "@angular2-material/button-toggle": "2.0.0-alpha.8-2",
    "@angular2-material/card": "2.0.0-alpha.8-2",
    "@angular2-material/checkbox": "2.0.0-alpha.8-2",
    "@angular2-material/core": "2.0.0-alpha.8-2",
    "@angular2-material/grid-list": "2.0.0-alpha.8-2",
    "@angular2-material/icon": "2.0.0-alpha.8-2",
    "@angular2-material/input": "2.0.0-alpha.8-2",
    "@angular2-material/list": "2.0.0-alpha.8-2",
    "@angular2-material/menu": "2.0.0-alpha.8-2",
    "@angular2-material/progress-bar": "2.0.0-alpha.8-2",
    "@angular2-material/progress-circle": "2.0.0-alpha.8-2",
    "@angular2-material/radio": "2.0.0-alpha.8-2",
    "@angular2-material/sidenav": "2.0.0-alpha.8-2",
    "@angular2-material/slide-toggle": "2.0.0-alpha.8-2",
    "@angular2-material/slider": "2.0.0-alpha.8-2",
    "@angular2-material/tabs": "2.0.0-alpha.8-2",
    "@angular2-material/toolbar": "2.0.0-alpha.8-2",
    "@angular2-material/tooltip": "2.0.0-alpha.8-2",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "^1.0.1",
    "@angularclass/hmr-loader": "^3.0.2",
    "@angularclass/request-idle-callback": "^1.0.7",
    "@angularclass/webpack-toolkit": "^1.3.3",
    "angular2-template-loader": "^0.5.0",
    "assets-webpack-plugin": "^3.4.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "~0.6.21"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.28",
    "@types/hammerjs": "^2.0.28",
    "@types/jasmine": "^2.2.29",
    "@types/lodash": "^4.14.34",
    "@types/node": "^6.0.38",
    "@types/protractor": "^1.5.16",
    "@types/selenium-webdriver": "^2.44.26",
    "@types/source-map": "^0.1.26",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^1.12.29",
    "ag-grid": "^5.3.0",
    "ag-grid-ng2": "^5.3.2",
    "angular2-jwt": "^0.1.21",
    "angular2-notifications": "^0.3.1",
    "angular2-template-loader": "^0.5.0",
    "awesome-typescript-loader": "^2.2.1",
    "bootstrap": "4.0.0-alpha.4",
    "bootstrap-loader": "^2.0.0-beta.6",
    "bootstrap-material-design": "^0.5.10",
    "codelyzer": "~0.0.28",
    "compression-webpack-plugin": "^0.3.1",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.25.0",
    "es6-promise-loader": "^1.0.1",
    "object-merge": "^2.5.1",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "extract-loader": "0.0.2",
    "extract-text-webpack-plugin": "^2.0.0-beta",
    "file-loader": "^0.9.0",
    "gh-pages": "^0.11.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.21.0",
    "image-webpack-loader": "^2.0.0",
    "imports-loader": "^0.6.5",
    "istanbul-instrumenter-loader": "^1.0.0",
    "jquery": "^3.0.0",
    "json-loader": "^0.5.4",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0 ",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.8.0",
    "lodash": "^4.14.1",
    "material-design-icons": "^3.0.1",
    "ng2-bootstrap": "^1.1.1",
    "ng2-translate": "^2.4.3",
    "node-sass": "^3.8.0",
    "normalize.css": "^4.2.0",
    "parse5": "^2.2.1",
    "postcss": "^5.2.0",
    "postcss-loader": "^0.13.0",
    "protractor": "^4.0.4",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.6.3",
    "resolve-url-loader": "^1.6.0",
    "rimraf": "^2.5.2",
    "sass-loader": "^4.0.1",
    "source-map-loader": "^0.1.5",
    "squel": "^5.3.3",
    "string-replace-loader": "^1.0.3",
    "style-loader": "^0.13.1",
    "tether": "^1.3.7",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.1",
    "ts-node": "^1.3.0",
    "tslint": "^3.15.0-dev.0",
    "tslint-loader": "^2.1.3",
    "typedoc": "^0.4.5",
    "typescript": "2.0.0",
    "typings": "^1.3.3",
    "url-loader": "^0.5.7",
    "webpack": "2.1.0-beta.22",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^2.1.0-beta.2",
    "webpack-material-design-icons": "0.0.2",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^0.14.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/bulktrade/SMSC.git"
  },
  "bugs": {
    "url": "https://github.com/bulktrade/SMSC/issues"
  },
  "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "noEmitHelpers": true,
        "strictNullChecks": false,
        "baseUrl": "./src",
        "paths": [
        ],
        "lib": [
            "dom",
            "es6"
        ],
        "types": [
            "hammerjs",
            "jasmine",
            "node",
            "protractor",
            "selenium-webdriver",
            "source-map",
            "uglify-js",
            "webpack"
        ]
    },
    "exclude": [
        "node_modules",
        "dist",
        "typings"
    ],
    "awesomeTypescriptLoaderOptions": {
        "forkChecker": true,
        "useWebpackText": true
    },
    "compileOnSave": false,
    "buildOnSave": false,
    "atom": { "rewriteTsconfig": false }
}

And test file

describe('Navigation', () => {
    console.log('It is jasmine');
    console.log(jasmine); // Display good
    console.log('It is protractor');
    console.log(protractor); // Error
});

jasmine variable is defined but protractor not.

Answer 1

My guess is that you do not have protractor installed globally. Your package.json expects a global instance.

In the devDependencies section, the protractor entry, change it to this:

node_modules/.bin/protractor 

This should allow you to use the local instance of protractor.