Currently, I am in the process of learning Angular and have set up my TypeScript and Webpack configurations as follows:
Here is my tsconfig file:
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"node_modules/@types/"
]
},
"exclude": [
"node_modules"
]
Now, let's take a look at my webpack.config.js file:
var path = require('path');
var webpack = require('webpack');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'app': './src/main.ts'
},
output:{
path: path.resolve(__dirname, './public'),
publicPath: '/public/',
filename: "[name].js"
},
resolve: {
extensions: ['.ts', '.js']
},
module:{
rules:[
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: path.resolve(__dirname, 'tsconfig.json') }
} ,
'angular2-template-loader'
]
}
]
},
plugins: [
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core/,
path.resolve(__dirname, 'src'),
{}
),
new UglifyJSPlugin()
]
}
Below are links to screenshots of my project layout:
However, when I try to run the project, I encounter the following errors:
ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:6208:55 TS2304: Cannot find name 'Map'.
ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:6215:55 TS2304: Cannot find name 'Set'.
ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:6225:59 TS2304: Cannot find name 'WeakMap'.
ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:6226:59 TS2304: Cannot find name 'WeakSet'.
If you'd like to see the full terminal log for these errors, please click on the link below:
Can anyone advise me on how to address these issues?