Import node js module in angular 2 application

Question

I wanna import nodejs proxy-lists module into angular2 application. I am using Electron with Angular2 and Webpack configuration.

This is my app.component.ts

import { Component } from '@angular/core';
const ProxyLists = require('proxy-lists');

@Component({
  selector: 'app',
  templateUrl: './app/app.component.html',
})

export class AppComponent {
  proxies: any[] = [];

  constructor() {
  }

  getProxies() {
    let options = {
      countries: ['us', 'ca']
    };

var gettingProxies = ProxyLists.getProxies(options);
gettingProxies.on('data', function (proxies) {
  console.log(proxies);
})


  }
  test() {
    console.log("work");
  }
}

this is webpack.config.js

    var path = require('path');
    var webpack = require('webpack');
    var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

module.exports = {
  devtool: 'source-map',
  entry: {
    'angular2': [
      'rxjs',
      'reflect-metadata',
      'zone.js',
      '@angular/core',
      '@angular/router',
      '@angular/http'
    ],
    'app': './src/main'
  },

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

  resolve: {
    extensions: ['.ts','.js','.json', '.css', '.html'],
    alias: {
      materializecss: 'materialize-css/dist/css/materialize.css',
      materialize: 'materialize-css/dist/js/materialize.js',
    }
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: [ /node_modules/ ]
      },
      { 
        test: /^((?!materialize).)*\.css$/,   
        loader: 'raw-loader' },
      { 
        test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, 
        loader: 'url-loader?limit=100000' 
      },
    ]
  },

  plugins: [
    new CommonsChunkPlugin({ name: 'angular2', filename: 'angular2.js', minChunks: Infinity }),
    new CommonsChunkPlugin({ name: 'common',   filename: 'common.js' }),
    new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "window.jQuery": "jquery",
          Hammer: "hammerjs/hammer"
      })

  ],
  target: 'electron-renderer'
};
</pre>

When I run the application, I get this error. app.png

You can import it by declaring it in types and then importing as normal, so import * as yourname from 'proxy-list'; if a type does not exits you can create one by adding it to your typings.d.ts file (in src) and then declaring it 'declare var proxyLists: any; — Pari Baker

Mohamed Nizar Mohamed Nizar · Accepted Answer · 2017-03-09T08:06:55

I never used angularjs2 , but You should make static those module on your nodejs server script.

app.use('/angular2', express.static(path.join(__dirname, '/node_modules')))

Import node js module in angular 2 application

1 Answers