使用 Nodejs 后端设置 angular2+webpack

Question

我已经设置了带有后端的 Angular2+webpack 和 NodeJs。

基本设置如下：

webpack.config.js：

var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var helpers = require('./helpers')

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['', '.ts', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}

webpack.dev.js：

var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var helpers = require('./helpers')

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['', '.ts', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}

webpack.config.js：

module.exports = require('./config/webpack.dev.js')

package.json:

{
  "name": "nr-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "concurrently \"webpack-dev-server --watch\" \"nodemon ./bin/www\" ",
    "test": "mocha"
  },
  "dependencies": {
    "@angular/common": "~2.4.2",
    "@angular/compiler": "~2.4.2",
    "@angular/core": "~2.4.2",
    "@angular/forms": "~2.4.2",
    "@angular/http": "~2.4.2",
    "@angular/platform-browser": "~2.4.2",
    "@angular/platform-browser-dynamic": "~2.4.2",
    "@angular/router": "~3.4.2",
    "@angular/upgrade": "~2.4.2",
    "@types/express": "^4.0.34",
    "@types/extract-text-webpack-plugin": "^2.0.0",
    "@types/node": "^6.0.48",
    "@types/typescript": "^2.0.0",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.0-beta.17",
    "body-parser": "~1.15.2",
    "browser-sync": "^2.18.5",
    "cookie-parser": "~1.4.3",
    "core-js": "^2.4.1",
    "debug": "~2.6.0",
    "del": "^2.2.2",
    "es6-promise": "^4.0.5",
    "es6-shim": "^0.35.2",
    "express": "~4.14.0",
    "express-less": "^0.1.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "feature": "^1.0.1",
    "gulp": "^3.9.1",
    "gulp-cache": "^0.4.5",
    "gulp-imagemin": "^3.1.1",
    "gulp-sass": "^3.0.0",
    "gulp-sourcemaps": "^2.2.0",
    "gulp-typescript": "^3.1.3",
    "gulp-uglify": "^2.0.0",
    "gulp-useref": "^3.1.2",
    "gulp-webserver": "^0.9.1",
    "jade": "~1.11.0",
    "mongoose": "^4.7.4",
    "morgan": "~1.7.0",
    "path": "^0.12.7",
    "reflect-metadata": "0.1.9",
    "run-sequence": "^1.2.2",
    "rxjs": "5.0.3",
    "serve-favicon": "~2.3.2",
    "stylus": "^0.54.5",
    "systemjs": "0.19.41",
    "zone.js": "0.7.4"
  },
  "devDependencies": {
    "@types/extract-text-webpack-plugin": "^2.0.0",
    "@types/gulp-plumber": "0.0.29",
    "@types/gulp-sourcemaps": "0.0.29",
    "@types/webpack-merge": "0.0.4",
    "chai": "^3.5.0",
    "concurrently": "^3.1.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "gulp": "^3.9.1",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.24.1",
    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.1",
    "lite-server": "^2.2.2",
    "ngtemplate-loader": "^1.3.1",
    "phantomjs-prebuilt": "^2.1.14",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.13.1",
    "superagent": "^3.3.1",
    "ts-loader": "^1.3.3",
    "tslint": "^4.3.1",
    "tslint-loader": "^3.3.0",
    "typescript": "^2.1.4",
    "typings": "^2.1.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "webpack-merge": "^2.3.1"
  }
}

我的问题是当我运行 npm start 时，它运行良好，但是当我想调用 NodeJS API 时，它确实调用了我的 api。因为它使用两个不同的端口运行。 NodeJs 使用端口3000 运行，webpack 使用端口8080 运行。

当我运行时它会起作用：

return this.http.get('http://localhost:3000/resume')
            .map(this.extractData)
            .catch(this.handleError);

但是如果我只调用this.http.get('/resume') 它不起作用，因为我当前的端口不是 webpack API 的 8080，我想调用 NodeJs API。同时，如果我从 3000 端口调用我所有的 api，它也不起作用。即使它不能进入​​打字稿类。

那么我该如何想出一个解决方案呢？

Answer 1

我编辑package.json

"scripts": {
    "start": "concurrently \"webpack-dev-server --watch\" \"nodemon ./bin/www\" ",
    "test": "mocha"
  },

到

"scripts": {
"start": "concurrently \"webpack --watch\" \"nodemon ./bin/www\" ",
"test": "mocha"
},

因为，webpack-dev-server 会生成自己的端口。我不需要那个东西。我需要的是只运行 angular2。