node.js - 在 Angular 2 应用程序中导入 Node js 模块

Question

我想将 NodeJS 代理列表模块导入到 Angular2 应用程序中。 我正在将 Electron 与 Angular2 和 Webpack 配置结合使用。

1. 这是我的 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);
   })
   
   
     }
     测试() {
       console.log(“工作”);
     }
   }
   

2. 这是 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>
   

3. 当我运行该应用程序时，出现此错误。 app.png

Answer 1

我从未使用过 angularjs2 ，但你应该在你的 Nodejs 服务器脚本上将这些模块静态化。

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