Webpack cannot find module 'electron'

问题:

I am trying to develop a little electron angular2 application based on this tutorial

It seems their is some error with the bundling of webpack, because i cant require/import the electron remote in my renderer component.

in my AppComponent I do the following

import {remote} from 'electron';

My Webpack Config

var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');

var config = {
  debug: true,

  devtool: 'source-map',

  entry: {
    'angular2': [
    'rxjs',
    'reflect-metadata',
    'angular2/core',
    'angular2/router',
    'angular2/http'
  ],
  'app': './src/app/renderer/bootstrap'
},

  output: {
    path: __dirname + '/build/',
    publicPath: 'build/',
    filename: '[name].js',
    sourceMapFilename: '[name].js.map',
    chunkFilename: '[id].chunk.js'
  },

  resolve: {
    extensions: ['','.ts','.js','.json', '.css', '.html'],
    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
  },

  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' })
  ]
};

config.target = webpackTargetElectronRenderer(config);
module.exports = config;

Webpack throws the following error

ERROR in ./src/app/renderer/components/app/app.ts
(1,22): error TS2307: Cannot find module 'electron'.

回答1:

Solved it

const electron = require('electron');
const remote = electron.remote;

回答2:

Try adding target: "electron-renderer" to the bottom of the module.exports object in your webpack config. (mine was created via ng eject via the Angular CLI)

回答3:

Are you new to TypeScript? Did you installed it? You can install it by:

npm install -g typescript

Your solutions is a java script solutions, which is an ok hack if that's what you are looking for, but if you want to use TypeScript, then you should be able to make it work using 'import'.

Do the tutorial in: https://www.npmjs.com/package/typescript

Also, check: TS2307: Cannot find module 'angular2/core' while importing Angular2 on TypeScript