title: Electron/Angular2/Typings App: Import module in a component
body: <p>I am really new to typescript and Angular2. It is been a day that I try to have an application running on electron with Angular2, Webpack and the Typings node module. The probleme is that everytime I find example on internet, electron is loaded by electron-prebuild as a node module. What I want is to be able to import electron to any component to be able to update my application from this component for example.</p>
  
  <p>I tried to use typings node module to add github-electron.d.ts from DefinitelyTyped to import it to my component like this:</p>
  
  <pre><code> import electron = require('electron')
  </code></pre>
  
  <p>But I have issues with it when I start the app (not during the build)</p>
  
  <pre><code>   Module not found: Error: Cannot resolve module 'electron' in /home/stephane/workspace/hacker-keyboard/app
  resolve module electron in /home/xxx/app
     looking for modules in /home/xxx/node_modules
  </code></pre>
  
  <p>Is someone have an example of this kind of architecture or know what is the error?</p>
  
  <p><strong>My configuration:</strong></p>
  
  <p>tree:</p>
  
  <pre><code>├── app
  │   ├── app.ts
  │   ├── index.html
  │   ├── main.js
  │   └── package.json
  ├── build
  │   ├── angular2.js
  │   ├── angular2.js.map
  │   ├── app.js
  │   ├── app.js.map
  │   ├── common.js
  │   ├── common.js.map
  │   ├── electron.js
  │   └── electron.js.map
  ├── node_modules
  │   ├── angular2
  │   ├── bootstrap
  │   ├── electron-prebuilt
  │   ├── es6-promise
  │   ├── es6-shim
  │   ├── gulp
  │   ├── reflect-metadata
  │   ├── rxjs
  │   ├── ts-loader
  │   ├── typescript
  │   ├── typings
  │   ├── webpack
  │   ├── webpack-dev-server
  │   └── zone.js
  ├── typings
  │   ├── browser
  │   │   └── ambient
  │   │       └── github-electron
  │   │           └── github-electron.d.ts
  │   ├── browser.d.ts
  │   ├── main
  │   │   └── ambient
  │   │       └── github-electron
  │   │           └── github-electron.d.ts
  │   └── main.d.ts
  ├── package.json
  ├── readme.md
  ├── tsconfig.json
  └── webpack.config.js
  </code></pre>
  
  <p>configuration files:</p>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "ES5",
      "module": "commonjs",
      "removeComments": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "sourceMap": true
    },
    "files": [
      "app/app.ts",
      "typings/main.d.ts"
    ]
  }
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
  
  module.exports = {
    devtool: 'source-map',
    debug: true,
  
    entry: {
      'angular2': [
        'rxjs',
        'reflect-metadata',
        'angular2/core',
        'angular2/router',
        'angular2/http'
      ],
      'app': './app/app'
    },
  
    output: {
      path: __dirname + '/build/',
      publicPath: 'build/',
      filename: '[name].js',
      sourceMapFilename: '[name].js.map',
      chunkFilename: '[id].chunk.js'
    },
  
    resolve: {
      extensions: ['','.ts','.js','.json', '.css', '.html']
    },
  
    module: {
      loaders: [
        {
          test: /\.ts$/,
          loader: 'ts',
          exclude: [ /node_modules/ ]
        }
      ]
    },
  
    plugins: [
      new CommonsChunkPlugin({ name: 'angular2', filename: 'angular2.js', minChunks: Infinity }),
      new CommonsChunkPlugin({ name: 'common',   filename: 'common.js' })
    ],
    target:'node-webkit'
  };
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "image-size-calculator",
    "version": "0.0.1",
    "description": "",
    "main": "index.js",
    "scripts": {
      "build": "webpack --progress --profile --colors --display-error-details --display-cached",
      "watch": "webpack --watch --progress --profile --colors --display-error-details --display-cached",
      "electron": "electron app"
    },
    "author": "Auth0",
    "license": "MIT",
    "devDependencies": {
      "electron-prebuilt": "^0.35.4",
      "es6-shim": "^0.34.0",
      "ts-loader": "^0.7.2",
      "typescript": "^1.7.3",
      "webpack": "^1.12.9",
      "webpack-dev-server": "^1.14.0"
    },
    "dependencies": {
      "angular2": "2.0.0-beta.2",
      "bootstrap": "^3.3.6",
      "es6-shim": "^0.33.3",
      "gulp": "^3.9.0",
      "reflect-metadata": "0.1.2",
      "rxjs": "5.0.0-beta.0",
      "typings": "^0.6.8",
      "zone.js": "^0.5.10"
    }
  }
  </code></pre>