Angular Project details: "@angular/cli": "^15.2.10" "swiper": "^8.4.7",
Am using swiper in my angular project and after migrating to angular 15 getting the error
"./node_modules/swiper/swiper.min.css?ngGlobalStyle:13:0 - Error: Module parse failed: Unexpected character '@' (13:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders"
This error can be temporarily solved by commenting the line out from the particular file node_modules/swiper/swiper.min.css but given this error is of node modules every time we do "npm i" it persists.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
},
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"allowedCommonJsDependencies": [
"@firebase",
"@angular/fire",
"rxjs",
"firebase",
"@firebase/app",
"@firebase/remote-config",
"@firebase/performance",
"@firebase/functions",
"@firebase/firestore",
"@firebase/database",
"@firebase/auth",
"@firebase/util",
"@firebase/component",
"jquery",
"firebase/app",
"css-element-queries",
"markdown-it",
"lottie-web/build/player/lottie_svg",
"src/app/components/terms-and-policy/terms-and-policy.component",
"crypto-js"
],
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
},
{
"glob": "**/robot.txt",
"input": "src/",
"output": "./"
},
"src/manifest.json",
"src/service-worker.js",
"src/robot.txt",
"src/sitemap-pages.xml",
"src/sitemap.xsl",
{
"glob": "workbox-sw.js",
"input": "node_modules/workbox-sw/build/",
"output": "./workbox-500"
},
{
"glob": "workbox-core.prod.js",
"input": "node_modules/workbox-core/build/",
"output": "./workbox-500"
},
{
"glob": "workbox-precaching.prod.js",
"input": "node_modules/workbox-precaching/build/",
"output": "./workbox-500"
},
{
"glob": "workbox-window.prod.mjs",
"input": "node_modules/workbox-window/build/",
"output": "./workbox-500"
},
"src/OneSignalSDKWorker.js",
"src/OneSignalSDKUpdaterWorker.js"
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
{
"input": "node_modules/intl-tel-input/build/css/intlTelInput.css"
},
{
"input": "src/customTheme.scss"
},
{
"input": "node_modules/flag-icon-css/css/flag-icons.min.css"
},
{
"input": "node_modules/swiper/swiper-bundle.min.css",
"inject": false
}
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules"
]
},
"scripts": [
"node_modules/intl-tel-input/build/js/intlTelInput.min.js",
"node_modules/intl-tel-input/build/js/utils.js",
"node_modules/clipboard/dist/clipboard.min.js",
"src/assets/js/Segment.js",
"src/assets/js/GTM.js",
"src/assets/js/typeform.js",
"src/OneSignalSDKWorker.js",
"src/OneSignalSDKUpdaterWorker.js"
],
"webWorkerTsConfig": "tsconfig.worker.json",
"aot": true,
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": true,
"sourceMap": true,
"optimization": true,
"namedChunks": true
},
"configurations": {
"production": {
"index": {
"input": "src/index.html",
"output": "index.html"
},
"optimization": true,
"outputHashing": "all",
"sourceMap": {
"hidden": true,
"scripts": true,
"styles": true
},
"namedChunks": true,
"aot": true,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "40mb",
"maximumError": "100mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "50kb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
"emulate": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.function-emulate.ts"
}
]
},
"ci": {
"progress": false
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
},
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"emulate": {
"browserTarget": "app:build:emulate"
},
"ci": {}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"styles": [
{
"input": "node_modules/swiper/swiper-bundle.min.css",
"inject": false
}
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules"
]
},
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
},
{
"glob": "**/robots.txt",
"input": "src/",
"output": "./"
},
"src/manifest.webmanifest"
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"devServerTarget": "app:serve:production"
},
"ci": {
"devServerTarget": "app:serve:ci"
}
}
},
"ionic-cordova-build": {
"builder": "@ionic/angular-toolkit:cordova-build",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
},
"ionic-cordova-serve": {
"builder": "@ionic/angular-toolkit:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
}
}
}
},
"cli": {
"defaultCollection": "@ionic/angular-toolkit",
"analytics": false
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}
After adding webpack.config.js and running "ng build" it gives following error
An unhandled exception occurred: path is not defined
Following installation are done :
- npm install sass-loader sass --save-dev
- npm install --save-dev @angular-builders/custom-webpack
- npm install --save-dev webpack-cli
- npm install --save-dev webpack
Used webpack.config.js file to solve this error.
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/main.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'www')
},
plugins: [
new MiniCssExtractPlugin({
filename: 'styles.css'
}),
],
module: {
rules: [
{
test: /\.css$/,
use : [
'style-loader',
'css-loader',
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
}
]
}
]
},
};
changed angular.json file to include webpack.config.js while building
Is this approach a correct way to solve this issue ,if not any help would be appreciated.