I am having my angular project inside a java application inside webpages->ressources->static-> angular project Following is my webpack.config.js file
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = (envOptions) => {
envOptions = envOptions || {};
const config = {
entry: {
main: './src/main.ts'
},
output: {
path: '/dist',
publicPath: '/',
filename: 'main.js'
},
resolve: {
modules: [
path.resolve(__dirname, "node_modules"),
],
extensions: ['.ts', '.js', '.html']
},
module: {
rules: [
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
},
{
test: /\.(woff(2)?|ttf|eot|pdf)$/,
type: 'assets/',
loader: 'file-loader?name=assets/test.pdf',
generator: {
filename: './[name][ext]',
},
}
]
},
};
if (envOptions.MODE === 'prod') {
config.plugins = [
/*new ExtractTextPlugin({ filename: 'styles.css', disable: false, allChunks: true }),*/
new webpack.optimize.UglifyJsPlugin({
beautify: false,
mangle: {
screw_ie8: true,
keep_fnames: true
},
compress: {
screw_ie8: true,
warnings: false,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
negate_iife: false // we need this for lazy v8
},
comments: false
}),
new webpack.ContextReplacementPlugin( /angular(\\|\/)core(\\|\/)(@angular|esm5)/, path.resolve(__dirname, './src') ),
new HtmlWebpackPlugin({
title: 'Dashboard',
// template: 'index.ejs', // Load a custom template (ejs by default see the FAQ for details)
inject: 'body'
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
];
}
return config;
};
This is my project folder structure
package.json
{
"name": "test",
"version": "0.0.0",
"scripts": {
"start": "webpack-dev-server --content-base build/ -w",
"build": "webpack --config webpack.config.js",
"build:watch": "webpack --config webpack.config.js -w ",
"build:prod": "webpack --config webpack.config.js --mode production",
"build:dev": "webpack --config webpack.config.js --mode development",
"serve": "lite-server -c=bs-config.json",
"prestart": "npm run build:dev",
"lint": "tslint ./**/*.ts -t verbose"
},
"private": true,
"dependencies": {
"@angular/animations": "~14.2.0",
"@angular/common": "~14.2.0",
"@angular/compiler": "~14.2.0",
"@angular/core": "~14.2.0",
"@angular/forms": "~14.2.0",
"@angular/platform-browser": "~14.2.0",
"@angular/platform-browser-dynamic": "~14.2.0",
"@angular/router": "~14.2.0",
"@types/pdfjs-dist": "^2.10.378",
"bootbox": "^5.5.3",
"core-js": "^3.25.0",
"jquery": "^3.6.1",
"jspdf": "^2.5.1",
"ng2-pdf-viewer": "^9.1.1",
"ngx-dropzone-wrapper": "^11.0.0",
"pdfjs-dist": "^2.16.105",
"rxjs": "~7.5.6",
"tslib": "^2.4.0",
"worker-loader": "^3.0.8",
"zone.js": "~0.11.8"
},
"devDependencies": {
"@angular-devkit/build-angular": "~14.2.1",
"@angular/cli": "~14.2.1",
"@angular/compiler-cli": "~14.2.0",
"@angular/language-service": "~14.2.0",
"@ngtools/webpack": "^14.2.3",
"@types/jasmine": "~4.3.0",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.5.14",
"@types/node": "~18.7.15",
"codelyzer": "~6.0.2",
"css-loader": "^6.7.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"jasmine-core": "~4.4.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"protractor": "~7.0.0",
"style-loader": "^3.3.1",
"ts-node": "~10.9.1",
"tslint": "~6.1.3",
"typescript": "~4.8.2",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}
When I'm building the file, I'm getting the following errors
[webpack-cli] Error: Compiling RuleSet failed: Query arguments on 'loader' has been removed in favor of the 'options' property (at ruleSet[1].rules[2].loader: file-loader?name=assets/test.pdf)
at RuleSetCompiler.error (projectFolder\src\main\webapp\resources\static\node_modules\webpack\lib\rules\RuleSetCompiler.js:373:10)
at projectFolder\src\main\webapp\resources\static\node_modules\webpack\lib\rules\UseEffectRulePlugin.js:160:29
at Hook.eval [as call] (eval at create (projectFolder\src\main\webapp\resources\static\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:49:1)
at RuleSetCompiler.compileRule (projectFolder\main\webapp\resources\static\node_modules\webpack\lib\rules\RuleSetCompiler.js:177:19)
at projectFolder\src\main\webapp\resources\static\node_modules\webpack\lib\rules\RuleSetCompiler.js:154:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (projectFolder\src\main\webapp\resources\static\node_modules\webpack\lib\rules\RuleSetCompiler.js:153:16)
at RuleSetCompiler.compileRule (projectFolder\src\main\webapp\resources\static\node_modules\webpack\lib\rules\RuleSetCompiler.js:184:30)
at projectFolder\src\main\webapp\resources\static\node_modules\webpack\lib\rules\RuleSetCompiler.js:154:9
at Array.map (<anonymous>)
I'm unable to find the root cause. I tried many solutions and all the fixes are throwing a new error. Any help is much appreciated.
EDIT I have added a file-loader to load the tsconfig.json file using awesome-typescript-loader, the library wasn't importing as it has compatibility issues with typescript version. I used --force to install & following is the error.
ERROR in ./src/main.ts
Module build failed (from ./node_modules/awesome-typescript-loader/dist/entry.js):
TypeError: compiler.plugin is not a function
at setupWatchRun (projectFolder\src\main\webapp\resources\static\node_modules\awesome-typescript-loader\src\instance.ts:365:14)
Updated package.json
"dependencies": {
"@angular/animations": "~14.2.0",
"@angular/common": "~14.2.0",
"@angular/compiler": "~14.2.0",
"@angular/core": "~14.2.0",
"@angular/forms": "~14.2.0",
"@angular/platform-browser": "~14.2.0",
"@angular/platform-browser-dynamic": "~14.2.0",
"@angular/router": "~14.2.0",
"@types/pdfjs-dist": "^2.10.378",
"bootbox": "^5.5.3",
"core-js": "^3.25.0",
"jquery": "^3.6.1",
"jspdf": "^2.5.1",
"ng2-pdf-viewer": "^9.1.1",
"ngx-dropzone-wrapper": "^11.0.0",
"pdfjs-dist": "^2.16.105",
"rxjs": "~7.5.6",
"worker-loader": "^3.0.8",
"zone.js": "~0.11.8"
},
"devDependencies": {
"@angular-devkit/build-angular": "~14.2.1",
"@angular/cli": "~14.2.1",
"@angular/compiler-cli": "~14.2.0",
"@angular/language-service": "~14.2.0",
"@ngtools/webpack": "^14.2.3",
"@types/jasmine": "~4.3.0",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.5.14",
"@types/node": "~18.7.15",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.5.0",
"codelyzer": "~6.0.2",
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"jasmine-core": "~4.4.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"protractor": "~7.0.0",
"style-loader": "^3.3.1",
"ts-node": "~10.9.1",
"tslib": "^2.4.0",
"tslint": "~6.1.3",
"typescript": "^4.8.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
Updated webpack.config.js
var path = require('path');
//var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = (envOptions) => {
envOptions = envOptions || {};
const config = {
entry: {
main: './src/main.ts'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: '[name].bundle.js'
},
resolve: {
modules: [
path.resolve(__dirname, "node_modules"),
],
extensions: ['.ts', '.js', '.html'],
alias: {
src: path.resolve(__dirname, './src/'),
},
},
module: {
rules: [
{test: /\.html$/, loader: 'html-loader'},
{ test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: path.resolve(__dirname, 'tsconfig.json') }
},
'angular2-template-loader'
]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.(jpe?g|png|gif|woff|woff2|pdf|otf|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
use: [
{
loader: 'file-loader',
options: {
limit: 1000000,
name: 'assets/[name].[ext]'
}
}
]
},
]
},
};
if (envOptions.MODE === 'prod') {
config.plugins = [
/*new ExtractTextPlugin({ filename: 'styles.css', disable: false, allChunks: true }),*/
new webpack.optimize.UglifyJsPlugin({
beautify: false,
mangle: {
screw_ie8: true,
keep_fnames: true
},
compress: {
screw_ie8: true,
warnings: false,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
negate_iife: false // we need this for lazy v8
},
comments: false
}),
// new webpack.ContextReplacementPlugin(
// /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)@angular/,
// __dirname
// ),
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)(@angular|esm5)/, path.resolve(__dirname, './src')),
new HtmlWebpackPlugin({
title: 'Dashboard',
// template: 'index.ejs', // Load a custom template (ejs by default see the FAQ for details)
inject: 'body'
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
];
}
return config;
};
Thanks in advance.
