Lately, I've been working on setting up a basic Angular 2 (TypeScript) application with Webpack 2 for bundling.
However, I'm encountering numerous errors when using ts-loader to process TypeScript (.ts) files. It seems like ts-loader is not excluding the node_modules directory despite specifying it in the webpack configuration.
I need assistance in configuring my webpack setup so that TypeScript can be transpiled correctly and bundled seamlessly with Webpack. Any help would be greatly appreciated.
Webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: './src/main.ts',
output: {
filename: './dist/bundle.js',
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
loaders: [{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'ts-loader'
}]
},
plugins: [
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
__dirname
),
]
};
package.json
{
"name": "tiptip-webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack -d --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@angular/common": "2.4.6",
"@angular/compiler": "2.4.6",
"@angular/core": "2.4.6",
"@angular/forms": "2.4.6",
"@angular/http": "2.4.6",
"@angular/platform-browser": "2.4.6",
"@angular/platform-browser-dynamic": "2.4.6",
"@angular/platform-server": "2.4.6",
"@angular/router": "3.4.6",
"@angularclass/conventions-loader": "^1.0.2",
"@angularclass/hmr": "~1.2.2",
"@angularclass/hmr-loader": "~3.0.2",
"core-js": "^2.4.1",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"jasmine-core": "^2.5.2",
"reflect-metadata": "^0.1.9",
"rxjs": "5.0.2",
"zone.js": "0.7.6"
},
"devDependencies": {
"source-map-loader": "^0.2.0",
"ts-loader": "^2.0.3",
"typescript": "^2.2.0",
"typings": "^2.1.0",
"webpack": "^2.2.0"
}
}
Error messages after running 'npm run build' https://i.stack.imgur.com/BFblk.png