Webpack ZoneAwareError - 預期'風格'是一個字符串數組（無預處理器）

Question

我想正確配置Webpack。我正在使用this blog post from Microsoft as basis。

目前，我在控制檯中發現異常，說Expected 'styles' to be an array of strings.我更深入地研究了這個錯誤，發現在大多數情況下，這是由webpack.config.js文件中的缺少加載程序或錯誤的配置引起的，但是項目工作正常，直到我嘗試在Shopify中創建它的嵌入式應用程序。請記住，我目前沒有使用任何預處理器！

所以我的問題是：

1. 可以這樣錯誤的事實，腳本中的iFrame拼命地跑造成的？
2. 我在配置中做錯了什麼？

這裏是我的webpack.config.js文件：

const path = require('path'); 
const webpack = require('webpack'); 
const merge = require('webpack-merge'); 
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; 

module.exports = (env) => { 
    // Configuration in common to both client-side and server-side bundles 
    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     context: __dirname, 
     resolve: { extensions: ['.ts', '.js'] }, 
     output: { 
      filename: '[name].js', 
      publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/, include: [/ClientApp/, /Plugins/], use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }, 
       { test: /\.html$/, use: 'html-loader?minimize=false' }, 
       { test: /\.css$/, use: ['to-string-loader', 'css-loader'] }, 
       { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } 
      ] 
     }, 
     plugins: [new CheckerPlugin()] 
    }; 

    // Configuration for client-side bundle suitable for running in browsers 
    const clientBundleOutputDir = './wwwroot/dist'; 
    const clientBundleConfig = merge(sharedConfig, { 
     entry: { 'bundle': './ClientApp/boot-client.ts' }, 
     output: { path: path.join(__dirname, clientBundleOutputDir) }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./wwwroot/dist/vendor-manifest.json') 
      }) 
     ].concat(isDevBuild ? [ 
      // Plugins that apply in development builds only 
      new webpack.SourceMapDevToolPlugin({ 
       filename: '[file].map', // Remove this line if you prefer inline source maps 
       moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
      }) 
     ] : [ 
       // Plugins that apply in production builds only 
       new webpack.optimize.UglifyJsPlugin() 
      ]) 
    }); 

    // Configuration for server-side (prerendering) bundle suitable for running in Node 
    const serverBundleConfig = merge(sharedConfig, { 
     resolve: { mainFields: ['main'] }, 
     entry: { 'main-server': './ClientApp/boot-server.ts' }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./ClientApp/dist/vendor-manifest.json'), 
       sourceType: 'commonjs2', 
       name: './vendor' 


}) 
    ], 
    output: { 
     libraryTarget: 'commonjs', 
     path: path.join(__dirname, './ClientApp/dist') 
    }, 
    target: 'node', 
    devtool: 'source-map' 
}); 

return [clientBundleConfig, serverBundleConfig]; 

};

這裏是JS例外，我得到的堆棧跟蹤：

Error: Expected 'styles' to be an array of strings. 
    at assertArrayOfStrings (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:70123:15) [<root>] 
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32189:101) [<root>] 
    at CompileMetadataResolver._loadDirectiveMetadata (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32121:23) [<root>] 
    at https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32322:54 [<root>] 
    at Array.forEach (native) [<root>] 
    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32321:41) [<root>] 
    at https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72595:58 [<root>] 
    at Array.forEach (native) [<root>] 
    at JitCompiler._loadModules (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72594:43) [<root>] 
    at JitCompiler._compileModuleAndComponents (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72549:52) [<root>] 
    at JitCompiler.compileModuleAsync (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72515:21) [<root>] 
    at PlatformRef_._bootstrapModuleWithZone (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:53194:25) [<root>] 
    at PlatformRef_.bootstrapModule (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:53169:21) [<root>] 
    at HTMLDocument.bootApplication (https://localhost/dist/bundle.js?v=5y5PspNLD-tK9PXgSUUIscip2N-vrKWGkiMyAtnQdaI:4813:46) [<root>] 

有沒有人有什麼可能是這個原因的任何想法？

Answer 1

我發現了這個問題。 :)

這是複製粘貼錯誤。在我的兩個組件中，初始化是：

@Component({ 
    selector: 'app', 
    template: require('./app.component.html'), 
    styles: require('./app.component.css') 
}) 

像這樣。請注意，styles屬性不是數組。顯然，它應該是。