When i run ng server i have those errors:
The point is that i am trying to update angular 13 to angular 14, however, if i do not user webpack i have a problem with @ in css and looking for info i found that i need a loader so i thought that i should use webpack but i have those errors. Is there a way to solve them?
SyntaxError
(2:7) C:\Proyectos\NOID\Project\node_modules\@xbs\webix-pro\webix.min.css Unknown word
1 |
> 2 | import API from "!../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../../style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../../style-loader/dist/runtime/insertBySelector.js";**
This is my custom-webmack.config:
const path = require('path');
module.exports = {
output: {
filename: "[name].scss",
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.(sass|css|scss)$/,
use: [
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: () => [
require("autoprefixer")()
],
},
},
'sass-loader',
]
},
{
test: /\.(jpg|jpeg|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: 'images',
outputPath: 'images',
}
}
},
]
},
};
this is package.json:
{
"name": "ingesys-apps-manager",
"version": "0.1.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/architect": "^0.1401.1",
"@angular-devkit/core": "^14.1.1",
"@angular/animations": "^14.0.0 || ^15.0.0",
"@angular/cdk": "^14.1.1",
"@angular/flex-layout": "^14.0.0-beta.40",
"@angular/forms": "^14.0.0 || ^15.0.0",
"@angular/localize": "^14.1.1",
"@angular/material": "^14.1.1",
"@angular/platform-browser-dynamic": "^14.1.1",
"@angular/router": "^14.1.1",
"@mdi/js": "^6.5.95",
"@ng-bootstrap/ng-bootstrap": "^13.0.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"@popperjs/core": "^2.11.5",
"@types/bignumber.js": "^5.0.0",
"@types/hammerjs": "^2.0.39",
"@types/jqueryui": "^1.12.15",
"@types/pako": "^1.0.1",
"@types/rx": "^4.1.2",
"@types/select2": "^4.0.53",
"@xbs/filemanager": "^9.4.2",
"@xbs/webix-pro": "^9.4.2",
"angular-split": "^3.0.3",
"babel-preset-es2015": "^6.24.1",
"bignumber.js": "^9.0.1",
"bluebird": "^3.7.2",
"bootstrap": "^5.2.0-beta1",
"buffer": "^5.7.1",
"crypto-js": "^4.1.1",
"dateformat": "^3.0.3",
"file-saver": "^2.0.5",
"highcharts": "^10.1.0",
"html-to-image": "^1.6.1",
"i": "^0.3.7",
"jquery": "^3.6.0",
"jquery-ui-dist": "^1.12.1",
"jqwidgets-framework": "^8.3.2",
"jqwidgets-ng": "^12.2.1",
"jqwidgets-scripts": "^8.3.2",
"json-bigint": "^1.0.0",
"jstoxml": "^2.0.5",
"jszip": "^3.9.1",
"jszip-utils": "^0.1.0",
"lodash": "^4.17.21",
"material-design-icons": "^3.0.1",
"material-icons": "^1.11.8",
"moment": "^2.29.3",
"moment-timezone": "^0.5.33",
"murmurhash": "^1.0.0",
"ngx-bootstrap": "^8.0.0",
"ngx-color-picker": "^7.5.0",
"ngx-drag-drop": "^2.0.0",
"ngx-image-compress": "^8.0.4",
"ngx-logger": "^4.2.2",
"ngx-mat-select-search": "^3.3.3",
"ngx-perfect-scrollbar": "6.1.0",
"ngx-store": "^3.1.1",
"ngx-xml2json": "^1.0.2",
"npm": "^8.16.0",
"pako": "^1.0.11",
"popper.js": "^1.16.1",
"resize-observer-polyfill": "^1.5.1",
"rxjs": "^7.5.6",
"rxjs-compat": "^6.6.7",
"rxjs-tslint": "^0.1.8",
"sass": "^1.54.3",
"secure-web-storage": "^1.0.2",
"select2": "^4.0.13",
"streamsaver": "^2.0.6",
"ts-md5": "^1.2.7",
"tslib": "^2.0.0",
"widget": "^0.0.2",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^14.0.0",
"@angular-builders/dev-server": "^7.3.1",
"@angular-devkit/build-angular": "^14.1.1",
"@angular/animations": "^14.1.1",
"@angular/cli": "^14.1.1",
"@angular/common": "^14.1.1",
"@angular/compiler": "^14.1.1",
"@angular/compiler-cli": "^14.1.1",
"@angular/core": "^14.1.1",
"@angular/elements": "^14.1.1",
"@angular/forms": "^14.1.1",
"@angular/platform-browser": "^14.1.1",
"@types/bootstrap": "^5.1.11",
"@types/crypto-js": "^4.1.1",
"@types/jquery": "^3.5.5",
"@types/json-bigint": "^1.0.1",
"@types/lodash": "^4.14.182",
"@types/node": "^12.20.50",
"ajv": "^8.8.2",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5",
"codelyzer": "^6.0.0",
"css-loader": "^6.7.1",
"exports-loader": "^4.0.0",
"jasmine-core": "^4.3.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.20",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"lodash.get": "^4.4.2",
"lodash.isequal": "^4.5.0",
"lodash.merge": "^4.6.2",
"lodash.set": "^4.3.2",
"postcss-loader": "^7.0.1",
"protractor": "~7.0.0",
"sass-loader": "^13.0.0",
"style-loader": "^3.3.1",
"ts-node": "~7.0.0",
"tslint": "^5.20.1",
"typescript": "4.6.4",
"webpack": "^5.74.0",
"worker-plugin": "^5.0.1"
}
}
this is angujar.json (the beggining)
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"Project": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "custom-webpack.config.js",
"replaceDuplicatePlugins": true
},
"aot": true,
"allowedCommonJsDependencies": [
"rxjs"
],
"outputPath": "dist/Project",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/assets",
"src/assets/scss"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"./src/styles.css",
"./node_modules/select2/dist/css/select2.css",
"./src/assets/styles/jqx.base.css",
"./src/assets/styles/jqx.light-ingeteam.css",
"./src/assets/styles/jqx.tree-light-ingeteam.css",
"./src/assets/scss/style.scss",
"./node_modules/jquery-ui-dist/jquery-ui.min.css",
"./node_modules/@xbs/webix-pro/webix.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/jquery-ui-dist/jquery-ui.min.js",
"./node_modules/select2/dist/js/select2.js",
"./node_modules/moment/moment.js",
"./node_modules/moment-timezone/moment-timezone.js",
"./node_modules/@xbs/webix-pro/webix.min.js"
],
"webWorkerTsConfig": "tsconfig.worker.json",
and this is postcss.config.js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-import'),
]
}
I think that the problem is related with the use of postcss-loader but i do not know where it is
