Previous package.json
"scripts": {
"start": "NODE_ENV=dev PLATFORM=APP webpack-dev-server --config configFiles/dev/webpack.dev.js --open --watch --progress --colors",
"build-dev": "NODE_ENV=dev PLATFORM=APP webpack --config configFiles/dev/webpack.dev.js --progress",
"start-dev-enterprise": "NODE_ENV=dev PLATFORM=ENTERPRISE webpack-dev-server --config configFiles/dev/webpack.dev.js --open --watch --progress --colors",
"build-dev-enterprise": "NODE_ENV=dev PLATFORM=ENTERPRISE webpack --config configFiles/dev/webpack.dev.js --progress",
"start-stage": "NODE_ENV=dev PLATFORM=APP webpack-dev-server --config configFiles/stage/webpack.stage.js --open --watch --progress --colors",
"build-stage": "NODE_ENV=prod PLATFORM=APP webpack --config configFiles/stage/webpack.stage.js --progress",
"start-stage-enterprise": "NODE_ENV=dev PLATFORM=ENTERPRISE webpack-dev-server --config configFiles/stage/webpack.stage.js --open --watch --progress --colors",
"build-stage-enterprise": "NODE_ENV=prod PLATFORM=ENTERPRISE webpack --config configFiles/stage/webpack.stage.js --progress",
"start-prod": "NODE_ENV=prod PLATFORM=APP webpack-dev-server --env.prod --config configFiles/prod/webpack.prod.js --open --watch --progress --colors",
"build-prod": "NODE_ENV=prod PLATFORM=APP webpack --config configFiles/prod/webpack.prod.js --progress",
"start-prod-enterprise": "NODE_ENV=prod PLATFORM=ENTERPRISE webpack-dev-server --env.prod --config configFiles/prod/webpack.prod.js --open --watch --progress --colors",
"build-prod-enterprise": "NODE_ENV=prod PLATFORM=ENTERPRISE webpack --config configFiles/prod/webpack.prod.js --progress",
"start-lan": "NODE_ENV=dev webpack-dev-server --config configFiles/lan/webpack.lan.js --open --watch --progress --colors --port 8082 --host 0.0.0.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-angularjs-annotate": "^0.9.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "0.1.17",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "0.28.7",
"csv-loader": "2.1.1",
"exports-loader": "0.6.4",
"extract-loader": "1.0.1",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"html-loader": "0.5.1",
"html-webpack-plugin": "2.30.1",
"imports-loader": "0.7.1",
"node-sass": "4.6.0",
"sass-loader": "6.0.6",
"style-loader": "0.19.0",
"uglifyjs-webpack-plugin": "1.0.1",
"url-loader": "0.6.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.7.2",
"webpack-merge": "4.1.1",
"yarn": "1.17.3"
},
"dependencies": {
"angular": "1.6.6",
"angular-animate": "1.6.7",
"angular-file-upload": "^2.6.1",
"angular-ui-mask": "1.8.7",
"angular-ui-router": "0.4.3",
"angular-ui-sortable": "0.17.1",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "4.1.1",
"bootstrap-daterangepicker": "2.1.30",
"core-js": "^3.0.0-beta.3",
"crypto-js": "^3.1.9-1",
"file-saver": "1.3.3",
"font-awesome": "4.7.0",
"jquery": "^3.6.0",
"jquery-ui": "1.12.1",
"jquery-ui-touch-punch": "0.2.3",
"moment": "2.20.1",
"ng-idle": "1.3.2",
"popper.js": "1.12.6",
"promise-polyfill": "^8.1.0",
"signature_pad": "3.0.0-beta.3",
"strophe.js": "^1.3.5",
"strophejs-plugin-disco": "0.0.2",
"uuid": "^8.3.1"
}
}
previous webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const transformPlugin = require('babel-plugin-angularjs-annotate');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MinifyPlugin = require("babel-minify-webpack-plugin");
const webpack = require('webpack');
module.exports = {
entry:{
app: './app/app.js',
vendor: ['angular', 'angular-ui-router', 'angular-ui-mask', 'ng-idle', 'jquery', 'angular-animate', 'bootstrap-daterangepicker',
'angular-ui-sortable', 'angular-file-upload', 'jquery-ui-touch-punch']
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: './app/index.html',
inject: 'body',
hash: true,
excludeChunks: ['ie9libs'],
//minify : true
}),
new webpack.optimize.CommonsChunkPlugin({
name : 'vendor',
chunks : ['app', 'vendor']
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
// In case you imported plugins individually, you must also require them here:
Util: "exports-loader?Util!bootstrap/js/dist/util",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown"
}),
new CopyWebpackPlugin([
{
from : './app/javascripts/sdk',
to : 'sdk/'
},
{
from : './app/assets/audio',
to: 'assets/audio/'
},
{
from: './app/assets/esign',
to: 'assets/esign'
},
{
from: './app/assets/pico',
to: 'assets/pico'
}
]),
],
output: {
filename: '[name].bundle.js?[hash]',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: [
path.resolve(__dirname, 'app/javascripts/sdk')
],
use: {
loader: 'babel-loader',
options: {
presets: [['es2015']],
"plugins": [transformPlugin]
}
}
},
{
test: /\.(html)$/,
include: [
path.resolve(__dirname, 'app/templates')
],
use: [
{
loader : 'file-loader',
options : {
name : '[name].[ext]',
outputPath: 'templates/',
}
},
{
loader : 'extract-loader'
},
{
loader : 'html-loader',
options : {
minimize: true
}
}
]
},
{
test: /\.(png|svg|jpg|gif|ico)$/,
use: [
{
loader: 'url-loader',
options: {
fallback: 'file-loader',
limit: 500,
name: './images/[name].[ext]'
}
}
]
},
{
test: /facefinder/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/pico/'
}
}
]
},
{
test: /\.(mp3|wav|wma|aac|ogg)$/,
include: [
path.resolve(__dirname, 'app/assets/audio')
],
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/audio/'
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader : 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
publicPath: '../'
}
}
]
},
{
test: /ui-sortable/,
use: ['imports-loader?$UI=jquery-ui/ui/widgets/sortable']
},
{
test: /\.(csv|tsv)$/,
use: [
{
loader : 'file-loader',
options: {
name (file){
return '[name].[ext]';
},
outputPath: 'csv/'
}
}
]
}
]
}
};
Previous Webpack.dev.js
const merge = require('webpack-merge');
const common = require('../../webpack.common.js');
const webpack = require('webpack');
const config=require('./dev-config.js');
module.exports = merge(common, {
devtool: 'eval',
devServer: {
contentBase: './dist',
//hot: true
},
plugins:[
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin(config)
],
module: {
rules: [
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
});
Updated package.json
{
"scripts": {
"start": "NODE_ENV=dev PLATFORM=APP webpack-dev-server --mode development --config configFiles/dev/webpack.dev.js --progress --color",
"build-dev": "NODE_ENV=dev PLATFORM=APP webpack --config configFiles/dev/webpack.dev.js --progress",
"start-dev-enterprise": "NODE_ENV=dev PLATFORM=ENTERPRISE webpack-dev-server --config configFiles/dev/webpack.dev.js --open --watch --progress --colors",
"build-dev-enterprise": "NODE_ENV=dev PLATFORM=ENTERPRISE webpack --config configFiles/dev/webpack.dev.js --progress",
"start-stage": "NODE_ENV=dev PLATFORM=APP webpack-dev-server --config configFiles/stage/webpack.stage.js --open --watch --progress --colors",
"build-stage": "NODE_ENV=prod PLATFORM=APP webpack --config configFiles/stage/webpack.stage.js --progress",
"start-stage-enterprise": "NODE_ENV=dev PLATFORM=ENTERPRISE webpack-dev-server --config configFiles/stage/webpack.stage.js --open --watch --progress --colors",
"build-stage-enterprise": "NODE_ENV=prod PLATFORM=ENTERPRISE webpack --config configFiles/stage/webpack.stage.js --progress",
"start-prod": "NODE_ENV=prod PLATFORM=APP webpack-dev-server --env.prod --config configFiles/prod/webpack.prod.js --open --watch --progress --colors",
"build-prod": "NODE_ENV=prod PLATFORM=APP webpack --config configFiles/prod/webpack.prod.js --progress",
"start-prod-enterprise": "NODE_ENV=prod PLATFORM=ENTERPRISE webpack-dev-server --env.prod --config configFiles/prod/webpack.prod.js --open --watch --progress --colors",
"build-prod-enterprise": "NODE_ENV=prod PLATFORM=ENTERPRISE webpack --config configFiles/prod/webpack.prod.js --progress",
"start-lan": "NODE_ENV=dev webpack-dev-server --config configFiles/lan/webpack.lan.js --open --watch --progress --colors --port 8082 --host 0.0.0.0"
},
"devDependencies": {
"@babel/core": "7.15.5",
"@babel/plugin-transform-runtime": "7.15.0",
"@babel/preset-env": "7.15.6",
"babel-loader": "8.2.2",
"babel-plugin-angularjs-annotate": "0.10.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
"clean-webpack-plugin": "4.0.0",
"copy-webpack-plugin": "9.0.1",
"css-loader": "6.2.0",
"csv-loader": "3.0.3",
"exports-loader": "3.0.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "6.2.0",
"html-loader": "2.1.2",
"html-webpack-plugin": "5.3.2",
"imports-loader": "3.0.0",
"mini-css-extract-plugin": "^2.3.0",
"node-sass": "6.0.1",
"sass-loader": "12.1.0",
"style-loader": "3.2.1",
"terser-webpack-plugin": "5.2.4",
"url-loader": "4.1.1",
"webpack": "5.52.1",
"webpack-cli": "4.8.0",
"webpack-dev-server": "4.2.1",
"webpack-merge": "5.8.0",
"yarn": "2.4.3"
},
"dependencies": {
"angular": "1.8.2",
"angular-animate": "1.8.2",
"angular-file-upload": "^2.6.1",
"angular-ui-mask": "1.8.7",
"angular-ui-router": "1.0.29",
"bootstrap": "4.6.0",
"bootstrap-daterangepicker": "3.1.0",
"core-js": "3.17.3",
"crypto-js": "^3.1.9-1",
"file-saver": "1.3.3",
"font-awesome": "4.7.0",
"jquery": "^3.6.0",
"jquery-ui": "1.12.1",
"jquery-ui-touch-punch": "0.2.3",
"moment": "2.29.1",
"ng-idle": "1.3.2",
"popper.js": "1.16.1",
"promise-polyfill": "^8.2.0",
"signature_pad": "3.0.0-beta.4",
"strophe.js": "^1.4.2",
"strophejs-plugin-disco": "0.0.2",
"uuid": "^8.3.2"
}
}
Updated webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const transformPlugin = require('babel-plugin-angularjs-annotate');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MinifyPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');
module.exports = {
entry:{
app: './app/app.js',
vendor: ['angular', 'angular-ui-router', 'angular-ui-mask', 'ng-idle', 'jquery', 'angular-animate', 'bootstrap-daterangepicker', 'angular-file-upload', 'jquery-ui-touch-punch']
},
plugins: [
new CleanWebpackPlugin({cleanAfterEveryBuildPatterns : ['dist']}),
new HtmlWebpackPlugin({
template: './app/index.html',
inject: 'body',
hash: true,
excludeChunks: ['ie9libs'],
//minify : true
}),
new MiniCssExtractPlugin(),
// new webpack.optimize.CommonsChunkPlugin({
// name : 'vendor',
// chunks : ['app', 'vendor']
// }),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
// In case you imported plugins individually, you must also require them here:
Util: "exports-loader?Util!bootstrap/js/dist/util",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown"
}),
new CopyWebpackPlugin({
patterns : [
{
from : './app/javascripts/sdk',
to : 'sdk/'
},
{
from : './app/assets/audio',
to: 'assets/audio/'
},
{
from: './app/assets/esign',
to: 'assets/esign'
},
{
from: './app/assets/pico',
to: 'assets/pico'
}
]
}),
],
output: {
filename: '[name].bundle.js?[hash]',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: [
path.resolve(__dirname, 'app/javascripts/sdk')
],
use: {
loader: 'babel-loader',
options: {
"sourceType": "unambiguous",
presets: ['@babel/preset-env'],
"plugins": [transformPlugin]
}
}
},
{
test: /\.(html)$/,
include: [
path.resolve(__dirname, 'app/templates')
],
use: [
{
loader : 'file-loader',
options : {
name : '[name].[ext]',
outputPath: 'templates/',
}
},
// {
// loader : 'extract-loader'
// },
{
loader : 'html-loader',
options : {
minimize: true
}
}
],
type: 'javascript/auto'
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.(png|svg|jpg|gif|ico)$/,
use: [
{
loader: 'url-loader',
options: {
fallback: 'file-loader',
limit: 500,
name: './images/[name].[ext]'
}
}
],
type: 'javascript/auto'
},
{
test: /facefinder/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/pico/'
}
}
],
type: 'javascript/auto'
},
{
test: /\.(mp3|wav|wma|aac|ogg)$/,
include: [
path.resolve(__dirname, 'app/assets/audio')
],
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/audio/'
}
}
],
type: 'javascript/auto'
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader : 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
publicPath: '../'
}
}
],
type: 'javascript/auto'
},
{
test: /ui-sortable/,
use: ['imports-loader?$UI=jquery-ui/ui/widgets/sortable']
},
{
test: /\.(csv|tsv)$/,
use: [
{
loader : 'file-loader',
options: {
name (file){
return '[name].[ext]';
},
outputPath: 'csv/'
}
}
],
type: 'javascript/auto'
}
]
},
optimization: {
splitChunks: {
chunks: 'async',
minSize: 20000,
minRemainingSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: '/[\\/]node_modules[\\/]/',
priority: -10,
reuseExistingChunk: true,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
}
};
Updated webpack.dev.js
const {merge} = require('webpack-merge');
const common = require('../../webpack.common.js');
const webpack = require('webpack');
const config=require('./dev-config.js');
module.exports = merge(common, {
devtool: 'eval',
devServer: {
static: './dist',
//hot: true
},
plugins:[
//new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin(config)
],
module: {
rules: [
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
optimization : {
moduleIds: 'named',
}
});
Im getting many errors like below in console without doing any change in code(html and controller files)
Lexer Error: Unexpected next character at columns 0-0 [\] in expression [\"initUserAuthenticationForEmail()\"]
html at the site of error is as given below:
<div class="form-group text-center">
<button class="btn font-weight-light btn-custom-blue btn-sm fw-300" ng-click="initUserAuthenticationForEmail()">Continue</button>
</div>
Also my screen is not getting rendered and it's showing static html on screen along with some code as shown below:
// Imports import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../node_modules/html-loader/dist/runtime/getUrl.js"; var ___HTML_LOADER_IMPORT_0___ = new URL("../images/google_new.png", import.meta.url); var ___HTML_LOADER_IMPORT_1___ = new URL("../images/ajax-loader.gif", import.meta.url); // Module var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___); var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___); var code = "
I also changes the node version from 8.16.1 to 14.17.6