I'm trying to run a hello world app in Angular 12 + webpack 5. When I try to add html-loader (as all the guides say i should), I get the error below.
Why does this happen? and how can I fix it?
If you'd like to replicate the situation, please see the GitHub repo here, and run the command npm run start.
ERROR in Error: /opt/tp/projects/tilt_angular/front/src/index.html:127
/******/ __webpack_require__.b = require("url").pathToFileURL(__filename);
^
ReferenceError: __filename is not defined
- index.html:127
/opt/tp/projects/tilt_angular/front/src/index.html:127:65
- index.html:146
/opt/tp/projects/tilt_angular/front/src/index.html:146:13
- index.html:156
/opt/tp/projects/tilt_angular/front/src/index.html:156:12
- index.js:327 HtmlWebpackPlugin.evaluateCompilationResult
[front]/[html-webpack-plugin]/index.js:327:28
- index.js:243
[front]/[html-webpack-plugin]/index.js:243:22
- runMicrotasks
- task_queues.js:97 processTicksAndRejections
internal/process/task_queues.js:97:5
- async Promise.all
- async Promise.all
Webpack conf:
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
bundle: './src/main.ts',
polyfills: './src/polyfills.ts',
// vendor: './src/vendor.ts',
},
mode: 'development',
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: [/node_modules/],
loader: 'babel-loader',
},
{
test: /\.ts$/,
use: ['ts-loader', 'angular2-template-loader'],
exclude: [/node_modules/],
},
{
test: /\.html$/,
loader: 'html-loader'
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
devServer: {
historyApiFallback: true,
}
};
