Webpack + Angular4 AoT错误预期'样式'成为一个字符串数组

时间:2017-07-07 12:25:24

标签: angular webpack angular-aot

我在运行我的Webpack3和Angular4 AoT时遇到错误(仅在AoT中发生)。我收到的错误是ERROR in Expected 'styles' to be an array of strings.。我已经尝试过这里提出的其他几种方法https://github.com/webpack-contrib/style-loader/issues/123,但没有运气。

以下是我的webpack配置:



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')
            ]
          }
        }
      })
    ]
  };

};




我的package.json是:



{
  "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"
  }
}




除了上述方法之外,我还尝试过Extract Text Webpack插件,但也没有运气。这是我尝试使用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']
          })
        }




我很好奇是否有人看到我可能正在做的任何事情,而其他案件可能没有。

此外,是否有人知道如何调试可能导致此问题的文件?我无法从我收到的错误中找到任何有用的错误。

0 个答案:

没有答案