当样式是数组时，如何解决“错误：预期的'样式'是字符串数组”？

Question

我正在从 NativeScript 3.4.2 升级到 6.0.3，并且我已经迁移了项目并升级了插件。我现在到了每次尝试运行应用程序时都会抛出此错误的地步：预期的“样式”是一个字符串数组。

我搜索了所有文件以确保它们都是数组并且它们是。在尝试解决这个问题时，我看到有人说 webpack.config.js 可能是问题，我尝试了几种不同的方法来编写以下内容：

                    test: /[\/|\\]app\.css$/,
                    use: [
                        "nativescript-dev-webpack/style-hot-loader",
                        { loader: "css-loader", options: { url: false } }
                    ]
                },
                {
                    test: /[\/|\\]app\.scss$/,
                    use: [
                        "nativescript-dev-webpack/style-hot-loader",
                        { loader: "sass-loader", options: { url: false } },
                        "sass-loader"
                    ]
                },

但我没有运气。

错误：

System.err: Error: Expected 'styles' to be an array of strings.
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.smartmedreminder.patientapp/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: Error: Expected 'styles' to be an array of strings.
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2434)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2494)
System.err:     at android.app.ActivityThread.access$900(ActivityThread.java:157)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1356)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     at android.os.Looper.loop(Looper.java:148)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:5527)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:730)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:620)
System.err: Caused by: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: Error: Expected 'styles' to be an array of strings.
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1109)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1089)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1081)
System.err:     at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:19)
System.err:     at android.app.Activity.performCreate(Activity.java:6272)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1108)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2387)
System.err:     ... 9 more
JS: CRASHED

webpack.config.js：

module: {
            rules: [
                {
                {
                    test: /[\/|\\]app\.css$/,
                    use: [
                        "nativescript-dev-webpack/style-hot-loader",
                        { loader: "css-loader", options: { url: false } }
                    ]
                },
                {
                    test: /[\/|\\]app\.scss$/,
                    use: [
                        "nativescript-dev-webpack/style-hot-loader",
                        { loader: "sass-loader", options: { url: false } },
                        "sass-loader"
                    ]
                },

                // Angular components reference css files and their imports using raw-loader
                { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: ["raw-loader", "css-loader"] },
                { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },

                {
        }

package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": {
    "type": "git",
    "url": "..."
  },
  "nativescript": {
    "id": "...",
    "tns-android": {
      "version": "6.0.2"
    },
    "tns-ios": {
      "version": "6.0.2"
    }
  },
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@nstudio/nativescript-cardview": "^1.0.0",
    "@nstudio/nativescript-pulltorefresh": "^1.0.1",
    "CUSTOM": "CUSTOM",
    "moment": "^2.24.0",
    "nativescript-angular": "^8.2.0",
    "nativescript-bluetooth": "^1.3.0",
    "nativescript-CUSTOM": "CUSTOM",
    "nativescript-CUSTOM": "CUSTOM",
    "nativescript-feedback": "CUSTOM",
    "nativescript-fingerprint-auth": "^7.0.1",
    "nativescript-gradient": "2.0.1",
    "nativescript-https": "CUSTOM",
    "nativescript-iqkeyboardmanager": "1.5.1",
    "nativescript-local-notifications": "^4.0.1",
    "nativescript-localstorage": "2.0.1",
    "nativescript-modal-datetimepicker": "1.2.0",
    "nativescript-orientation": "2.2.3",
    "nativescript-permissions": "1.3.7",
    "nativescript-secure-storage": "2.5.0",
    "nativescript-theme-core": "2.0.6",
    "nativescript-ui-sidedrawer": "^7.0.0",
    "nativescript-vibrate": "2.1.3",
    "reflect-metadata": "~0.1.13",
    "rxjs": "^6.5.2",
    "tns-core-modules": "^6.0.7",
    "uint48be": "^2.0.1",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.2.0",
    "@ngtools/webpack": "~8.2.0",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "lazy": "1.0.11",
    "mini-css-extract-plugin": "^0.8.0",
    "nativescript-dev-webpack": "^1.1.1",
    "raw-loader": "^3.1.0",
    "tns-platform-declarations": "6.0.1",
    "tslint": "5.19.0",
    "typescript": "~3.5.3",
    "uglifyjs-webpack-plugin": "~2.2.0"
  }
}

Answer 1

我可以通过从 app.component 中的 stylesUrl 中删除 app.css 来解决这个问题。

app.component.ts：

import { Component } from "@angular/core";
import { setStatusBarColors } from "./shared";

@Component({
    selector: "main",
    template: "<page-router-outlet></page-router-outlet>",
    // styleUrls: "[./app.css]" **I removed this line**
})
export class AppComponent {
  constructor(){
    setStatusBarColors();
  }

}