0
Angular2 + webpackとNodeJをバックエンドで設定しました。Node2sバックエンドを使用してangular2 + webpackを設定する
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を呼び出して行います。それは2つの異なるポートで動作するためです。 NodeJsはポート3000で実行され、webpackはポート8080で実行されます。
それは、私が実行したときに見つけ作品：私の現在のポートがAPIをWebPACKの8080ではないので、
return this.http.get('http://localhost:3000/resume')
.map(this.extractData)
.catch(this.handleError);
をしかし、私は唯一のthis.http.get('/resume')を呼び出した場合、それは動作しません、と私はNodeJsのAPIを呼び出したいです。一方、私は3000ポートからすべての私のAPIを呼び出す場合、どちらも動作しません。 typescriptクラスの中に入ることさえできません。
どうすれば解決策を考え出すことができますか？
8080でnodejsを実行するか、webpack-dev-serverを3000で実行するように設定できます。https://webpack.github.io/docs/webpack-dev-server.html#additional-configuration-options – Ayyash