将Ionic 4更新为Ionic 6时出现的WebPack错误

Question

我需要更新我的离子项目，它现在是4.1的最新版本.我重新安装了所有的软件包。但是，当我尝试运行ng serve时，它会给出以下错误：

<e> [webpack-dev-middleware] HookWebpackError: Transform failed with 2 errors:
<e> styles.css:1951:32: ERROR: Expected ")" to end URL token
<e> styles.css:1969:32: ERROR: Expected ")" to end URL token
<e>     at makeWebpackError (/home/rafael/Documentos/SCC4/projetos/easymarinegestorapp/node_modules/webpack/lib/HookWebpackError.js:48:9)
<e>     at /home/rafael/Documentos/SCC4/projetos/easymarinegestorapp/node_modules/webpack/lib/Compilation.js:3059:12
<e>     at eval (eval at create (/home/rafael/Documentos/SCC4/projetos/easymarinegestorapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:96:1)
<e>     at runMicrotasks (<anonymous>)
<e>     at processTicksAndRejections (internal/process/task_queues.js:97:5)
<e> -- inner error --

旧package.json：

"dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@ionic/angular": "^4.11.13",
    "br-mask": "0.0.8",
    "cordova-android": "9.1.0",
    "cordova-ios": "5.1.1",
    "cordova-plugin-advanced-http": "^2.5.1",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-fcm-with-dependecy-updated": "^4.6.4",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-google-analytics": "^1.9.0",
    "cordova-plugin-local-notification": "^0.9.0-beta.2",
    "cordova.plugins.diagnostic": "^6.1.0",
    "core-js": "^2.6.12",
    "moment": "^2.29.1",
    "rxjs": "^6.6.7",
    "sockjs-client": "^1.5.2",
    "tslib": "^1.14.1",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.2.2",
    "zone.js": "~0.9.1"
}

新package.json：

"dependencies": {
    "@angular/common": "~13.3.5",
    "@angular/compiler": "~13.3.5",
    "@angular/core": "~13.3.5",
    "@angular/forms": "~13.3.5",
    "@angular/platform-browser": "~13.3.5",
    "@angular/platform-browser-dynamic": "~13.3.5",
    "@angular/router": "~13.3.5",
    "@fortawesome/angular-fontawesome": "^0.10.2",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@ionic/angular": "^6.1.4",
    "@ionic/cordova-builders": "^6.1.0",
    "br-mask": "0.0.10",
    "cordova-ios": "6.2.0",
    "cordova-plugin-advanced-http": "^3.3.1",
    "cordova-plugin-app-version": "^0.1.14",
    "cordova-plugin-camera": "^6.0.0",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.8.0",
    "cordova-plugin-file": "^7.0.0",
    "cordova-plugin-google-analytics": "^1.9.1",
    "cordova-plugin-local-notification": "0.9.0-beta.2",
    "cordova.plugins.diagnostic": "^6.1.1",
    "core-js": "^3.22.4",
    "moment": "^2.29.3",
    "rxjs": "^7.5.5",
    "sockjs-client": "^1.6.0",
    "tslib": "^2.4.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.6",
    "zone.js": "~0.11.5"
}

我知道这是个模糊的错误，但我已经没有选择余地了。我一直在到处找类似的虫子.

Answer 1

在查找所有.css文件时，发现了两行代码：

background-image: url(src\assets\images\padlock-closed.png), ;
background-image: url(src\assets\images\padlock-open.png), ;

改为：

background-image: url('src\assets\images\padlock-closed.png') ;
background-image: url('src\assets\images\padlock-open.png') ;