I have attempted various solutions for this particular error message without any success. When launching my angular project using the angular cli via ng serve, everything runs smoothly with no errors. However, upon compiling it with webpack, I encounter the following (detailed) error message:
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
This is my webpack.config.js file:
// Required Plugins
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// Configuration
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"
})
]
}
My .angular-cli.json file:
{
"apps": [
{
"root": "src",
"outDir": "dist",
"index": "index.tpl.html",
"main": "main.ts",
"polyfills": "polyfills.ts"
}
],
"defaults": {
"styleExt": "css"
}
}
app-root / 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 {
}
Any insights into what might be going wrong in my setup would be greatly appreciated.