title: Angular 4: "Cannot find name 'require'
body: <p>I am building an app with <strong>Angular 4</strong> and <strong>webpack</strong>.</p>
  
  <p>I have the following in one of my components:</p>
  
  <pre><code>ngOnInit() {
      require('/assets/js/regular-expresions.js');
  }
  </code></pre>
  
  <p>When I attempt to compile, I get:</p>
  
  <blockquote>
    <p>ERROR in
    C:/SRC/Sandbox/eat-sleep-code.com/src/app/content.component.ts (21,9):
    Cannot find name 'require'.</p>
  </blockquote>
  
  <p>I have ran <code>npm install @types/node --save-dev</code> and updated my tsconfig.json to look like:</p>
  
  <pre><code>{
    "compileOnSave": false,
    "compilerOptions": {
      "outDir": "./dist/out-tsc",
      "baseUrl": "src",
      "sourceMap": true,
      "declaration": false,
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "es5",
      "types": [
        "node"
      ],
      "typeRoots": [
        "node_modules/@types"
      ],
      "lib": [
        "es2016",
        "dom"
      ]
    }
  }
  </code></pre>
  
  <p>But alas, the same error keeps getting thrown.  Any ideas?</p>
  
  <hr>
  
  <p>Here is my package.json:</p>
  
  <pre><code>{
    "name": "eat-sleep-code.com",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^4.0.1",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.3",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "@types/node": "^6.0.69",
      "angularfire2": "^2.0.0-beta.8",
      "core-js": "^2.4.1",
      "firebase": "^3.7.8",
      "jquery": "^3.2.1",
      "jquery-validation": "^1.16.0",
      "ng2-gist": "^1.0.0",
      "promise-polyfill": "^6.0.2",
      "requirejs": "^2.3.3",
      "rxjs": "^5.1.0",
      "typescript": "^2.2.2",
      "web-animations-js": "^2.2.4",
      "webpack": "^2.4.1",
      "zone.js": "^0.8.4"
    },
    "devDependencies": {
      "@angular/cli": "1.0.0",
      "@angular/compiler-cli": "^4.0.0",
      "@types/jasmine": "2.5.38",
      "@types/node": "^6.0.69",
      "codelyzer": "~2.0.0",
      "jasmine-core": "~2.5.2",
      "jasmine-spec-reporter": "~3.2.0",
      "karma": "~1.4.1",
      "karma-chrome-launcher": "~2.0.0",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^0.2.0",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.1.0",
      "ts-node": "~2.0.0",
      "tslint": "~4.5.0",
      "typescript": "^2.2.2",
      "webpack": "^2.4.1"
    }
  }
  </code></pre>