How do I set up Webpack, Angular 2.0, and Django together? - node.js

Question

I am currently trying a setup a webpack, angular 2.0 and django stack and trying to work with all of the parts together is a bit confusing.
I am using NPM to handle the libraries.
Here are the errors when I try to compile the typescript for loading with django:
Asset Size Chunks Chunk Names
main-71f084fe9f6c4015034a.ts 5.09 MB 0, 1, 2 [emitted] main
app-71f084fe9f6c4015034a.ts 23 bytes 1, 2 [emitted] app
vendor-71f084fe9f6c4015034a.ts 3.6 kB 2, 1 [emitted] vendor
+ 329 hidden modules
ERROR in /home/bischoff_s/Code/optim/typings/globals/webpack-env/index.d.ts
(176,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'require' must be of type 'NodeRequire', but here has type 'RequireFunction'.
ERROR in /home/bischoff_s/Code/optim/typings/globals/webpack-env/index.d.ts
(225,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'module' must be of type 'NodeModule', but here has type 'Module'
Here is my tsconfig.json file
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
}
}
My typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320"
}
}
My webpack.common.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'vendor': './assets/js/vendor.ts',
'app': './assets/js/index.ts'
},
entry: './assets/js/index.ts',
resolve: {
extensions: ['', '.js', '.ts']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['ts', '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]'
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor']
})
]
};
and finally webpack.dev.js
var path = require("path")
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var BundleTracker = require('webpack-bundle-tracker');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name]-[hash].ts",
},
plugins: [
new ExtractTextPlugin('[name].css'),
new BundleTracker({filename: './webpack-stats.json'})
],
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});

Answer 1

It was a problem with different typing from different webpack-env and node. here is the link for reference to the answer.
TypeScript error on compilation with webpack