我正在从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"
}
}
答案 0 :(得分：0)
我可以通过从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();
}
}