I'm having an error when running my Webpack3 and Angular4 AoT (only happens in AoT). The error I receive is ERROR in Expected 'styles' to be an array of strings.. I've tried several of the other methods suggested here https://github.com/webpack-contrib/style-loader/issues/123 but had no luck.
Below is my webpack config:
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { ENV, IS_PRODUCTION, APP_VERSION, IS_DEV, dir, DEPS, IN_MEM_DB } = require('./helpers');
const { CheckerPlugin } = require('awesome-typescript-loader');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
module.exports = function(options = {}) {
return {
context: dir(),
resolve: {
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
modules: [
'node_modules',
dir('src')
]
},
performance: {
hints: false
},
output: {
path: dir('dist'),
filename: '[name].js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
module: {
exprContextCritical: false,
rules: [
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.json/,
loader: 'json-loader'
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|jpeg|jpg|gif)$/,
loader: 'url-loader',
query: {
limit: '100000'
}
},
{
test: /\.css/,
use: ['to-string-loader', 'css-loader' ,'postcss-loader?sourceMap']
},
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'postcss-loader?sourceMap', 'sass-loader?sourceMap']
},
]
},
plugins: [
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: 'src/app/app.module#AppModule'
}),
new CopyWebpackPlugin([
{
from: 'src/assets',
to: 'assets'
},
{
from: 'node_modules/twemoji/2/svg',
to: 'assets/svgs'
}
]),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({
ENV,
IS_PRODUCTION,
DEPS,
APP_VERSION,
HMR: options.HMR,
IS_DEV,
IN_MEM_DB
}),
new CheckerPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
context: dir(),
tslint: {
emitErrors: false,
failOnHint: false,
resourcePath: 'src'
},
postcss: function() {
return [ autoprefixer ];
},
sassLoader: {
includePaths: [
dir('node_modules', '@swimlane', 'ngx-ui', 'release'),
dir('node_modules', '@swimlane', 'ngx-ui', 'release', 'styles')
]
}
}
})
]
};
};and my package.json is:
{
"name": "turbine-ui",
"version": "1.0.0-beta.6",
"description": "Turbine UI",
"main": "release/index.js",
"scripts": {
"start": "webpack-dev-server",
"start:mdb": "cross-env MOCK_DB=true webpack-dev-server",
"start:hmr": "webpack-dev-server --env.HMR",
"build": "webpack --display-error-details --progress",
"release": "cross-env NODE_ENV=production npm run build",
"lint": "tslint './src/{,**/}*.ts'",
"karma": "cross-env MOCK_DB=true karma start",
"karma:watch": "karma start --no-single-run --auto-watch",
"test": "npm run lint && npm run karma"
},
"engines": {
"node": ">=7.0.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/turbine-ui/turbine-ui.git"
},
"author": "Swimlane",
"license": "AGPL-3.0",
"keywords": [
"turbine"
],
"bugs": {
"url": "https://github.com/swimlane/turbine-ui/issues"
},
"homepage": "https://github.com/turbine-ui/turbine-ui#readme",
"peerDependencies": {},
"devDependencies": {
"@angular/compiler-cli": "^4.2.5",
"@types/jasmine": "^2.5.52",
"@types/node": "^8.0.7",
"angular-in-memory-web-api": "^0.3.2",
"angular-router-loader": "^0.6.0",
"angular2-template-loader": "^0.6.2",
"autoprefixer": "^6.7.6",
"awesome-typescript-loader": "^3.2.1",
"clean-webpack-plugin": "^0.1.15",
"codelyzer": "^3.1.2",
"copy-webpack-plugin": "^4.0.1",
"core-js": "^2.4.1",
"cross-env": "^4.0.0",
"css-loader": "^0.28.2",
"extract-text-webpack-plugin": "^3.0.0-beta.3",
"file-loader": "^0.11.1",
"glob": "^7.1.2",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.29.0",
"jasmine-core": "^2.6.4",
"json-loader": "^0.5.4",
"karma": "^1.6.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-mocha-reporter": "^2.2.2",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.2",
"node-sass": "^4.5.3",
"postcss-loader": "^1.3.3",
"raw-loader": "^0.5.1",
"sass-loader": "^4.1.0",
"source-map-loader": "^0.2.1",
"string-replace-loader": "^1.1.0",
"style-loader": "^0.18.0",
"to-string-loader": "^1.1.5",
"ts-helpers": "1.1.2",
"tslint": "^5.4.3",
"tslint-config-swimlane": "^3.0.2",
"tslint-loader": "^3.4.3",
"typescript": "^2.4.1",
"url-loader": "^0.5.8",
"webpack": "^3.0.0",
"webpack-combine-loaders": "^2.0.3",
"webpack-dev-server": "^2.5.0",
"webpack-merge": "^4.1.0",
"webpack-notifier": "^1.4.0"
},
"dependencies": {
"@angular/animations": "^4.2.5",
"@angular/common": "^4.2.5",
"@angular/compiler": "^4.2.5",
"@angular/core": "^4.2.5",
"@angular/forms": "^4.2.5",
"@angular/http": "^4.2.5",
"@angular/platform-browser": "^4.2.5",
"@angular/platform-browser-dynamic": "^4.2.5",
"@angular/router": "^4.2.5",
"@ngrx/core": "^1.2.0",
"@ngrx/store": "^2.2.2",
"@ngrx/store-devtools": "^3.2.4",
"@swimlane/ngx-charts": "^6.0.0",
"@swimlane/ngx-charts-dag": "^2.1.1",
"@swimlane/ngx-datatable": "^9.3.0",
"@swimlane/ngx-ui": "^17.0.2",
"ajv": "^4.11.6",
"angular2-moment": "^1.1.0",
"core-js": "^2.4.1",
"d3": "4.4.0",
"human-duration": "^1.0.1",
"js-yaml": "^3.8.4",
"jwt-decode": "^2.2.0",
"moment": "^2.17.1",
"qs": "^6.5.0",
"rxjs": "^5.4.2",
"socket.io-client": "^1.7.3",
"twemoji": "^2.3.0",
"zone.js": "^0.8.12"
}
}In addition to the above method, I've tried the Extract Text Webpack Plugin but had no luck with that either. Here is my config I was trying with ETWP 3.0.0-beta3
{
test: /\.css/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['to-string-loader', 'css-loader' ,'postcss-loader?sourceMap']
})
},
{
test: /\.scss$/,
exclude: /\.component.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader?sourceMap', 'sass-loader?sourceMap']
})
},
{
test: /\.component.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['to-string-loader', 'css-loader', 'postcss-loader?sourceMap', 'sass-loader?sourceMap']
})
}I'm curious if anyone sees anything that I might be doing that the other cases might not have had.
Also, does anyone know how to debug which file(s) might be causing this? I can't find any useful errors out of the error I'm receiving.