未捕获的错误：预期'样式'为字符串数组

我尝试过对此相同错误消息提出的解决方案，但未取得成功。当我通过ng服务运行角度cli的角度项目时，该项目运行良好，没有错误。然而，当我的WebPack编译它，我得到的（已满）错误信息：未捕获的错误：预期'样式'为字符串数组

Uncaught Error: Expected 'styles' to be an array of strings. 
    at z (vendor.js:1) 
    at t.getNonNormalizedDirectiveMetadata (vendor.js:1) 
    at t.loadDirectiveMetadata (vendor.js:1) 
    at vendor.js:1 
    at Array.forEach (<anonymous>) 
    at vendor.js:1 
    at Array.forEach (<anonymous>) 
    at t._loadModules (vendor.js:1) 
    at t._compileModuleAndComponents (vendor.js:1) 
    at t.compileModuleAsync (vendor.js:1) 
    at e._bootstrapModuleWithZone (vendor.js:1) 
    at e.bootstrapModule (vendor.js:1) 
    at Object.<anonymous> (app.js:1) 
    at Object.199 (app.js:1) 
    at e (vendor.js:1) 
    at window.webpackJsonp (vendor.js:1) 
    at app.js:1

我webpack.config.js：

// Plugins 

const webpack = require("webpack"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 

// Config 

module.exports = { 

    entry: { 
     app: "./src/main.ts", 
     vendor: ["./src/vendor.ts", "./src/polyfills.ts"] 
    }, 

    output: { 
     publicPath: "", 
     path: __dirname + "/dist/", 
     filename: "[name].js" 
    }, 

    resolve: { 
     extensions: ['.ts', '.js'] 
     }, 

    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       loaders: [ 
        { 
        loader: "awesome-typescript-loader", 
        options: { tsconfig: "tsconfig.json" } 
        }, "angular2-template-loader" 
       ] 
      }, 
      { 
       test: /\.(html)$/, 
       loaders: [ 
        { 
         loader: "html-loader" 
        } 
       ] 
      }, 
      { 
       test: /\.(css|scss)$/, 
       loaders: ['to-string-loader', 'css-loader', 'sass-loader'] 
      } 
     ] 
    }, 

    plugins: [ 
     new webpack.optimize.UglifyJsPlugin({ 
      comments: false 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
       names: ["app", "vendor"] 
     }), 
     new HtmlWebpackPlugin({ 
      template: "src/index.tpl.html", 
      inject: "body", 
      filename: "index.html" 
     }) 
    ] 

}

.angular-cli.json

{ 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "index": "index.tpl.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts" 
    } 
    ], 
    "defaults": { 
    "styleExt": "css" 
    } 
}

应用根/ app.component.ts

import { Component } from "@angular/core"; 
import { Observable } from "rxjs/Rx"; 
import { NgFor } from "@angular/common"; 

@Component ({ 
    selector: "app-root", 
    templateUrl: "./app.component.html", 
    styleUrls: ["./app.component.css"] 
}) 

export class AppComponent { 

}

对我在做什么错的任何建议？

来源

2017-08-31 Christian

可以请你分享角cli.json文件？ –

我已经更新了我的帖子，底部添加了.angular-cli.json的代码 – Christian

向我们显示了您的组件，这个错误很可能来自您的组件的样式属性 – Milad

我解决我的问题，通过以下Shobhit的建议，增加以下内容webpack.config.json：

... 
rules: [ 
{ 
    test: /\.(scss|css)$/, 
    use: ["raw-loader", "sass-loader"] 
}, 
{ 
    test: /\.scss$/, 
    exclude: [/node_modules/, /src\/app/], 
    use: ExtractTextPlugin.extract({ 
    fallback: "style-loader", 
    use: ["css-loader", "sass-loader"] 
    }) 
} 
...

而且

plugins: [ 
    new ExtractTextPlugin("styles.css") 
...

来源

2017-08-31 12:38:55 Christian

未捕获的错误：预期'样式'为字符串数组

回答

相关问题