Javascript 网页包ZoneAwareError-预期为&x27;风格';作为字符串数组(无预处理器)
我正在尝试正确配置网页包。我正在使用 目前,我在控制台中遇到一个异常,说Javascript 网页包ZoneAwareError-预期为&x27;风格';作为字符串数组(无预处理器),javascript,angular,webpack,shopify,Javascript,Angular,Webpack,Shopify,我正在尝试正确配置网页包。我正在使用 目前,我在控制台中遇到一个异常,说预期“样式”是一个字符串数组。我更深入地研究了错误,发现在大多数情况下,这是由于webpack.config.js文件中缺少加载程序或配置不好造成的,但在我尝试创建它的嵌入式应用程序之前,该项目运行良好,在Shopify中。请记住,我目前没有使用任何预处理器 因此,我的问题是: 此错误是否由脚本在iFrame中运行引起的 我的配置是否有问题 这是我的webpack.config.js文件: const path = requ
预期“样式”是一个字符串数组。
我更深入地研究了错误,发现在大多数情况下,这是由于webpack.config.js文件中缺少加载程序或配置不好造成的,但在我尝试创建它的嵌入式应用程序之前,该项目运行良好,在Shopify中。请记住,我目前没有使用任何预处理器
因此,我的问题是:
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>]
错误:“样式”应为字符串数组。
在assertArrayOfStrings(https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:70123:15)[]
在CompileMetadataResolver.getNonNormalizedDirectiveMetadata上(https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32189:101)[]
在CompileMetadata解析器上。\u加载DirectiveMetadata(https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32121:23)[]
在https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32322:54[]
在Array.forEach(本机)[]
在CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata(https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32321:41)[]
在https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72595:58[]
在Array.forEach(本机)[]
在JIT编译器上。\u加载模块(https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72594:43)[]
在JIT编译器上.\u编译模块和组件(https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72549:52)[]
在JitCompiler.compileModuleAsync上(https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72515:21)[]
在PlatformRef.\uBootstrapModule WithZone(https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:53194:25)[]
在PlatformRef_uu.bootstrapModule(https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:53169:21)[]
在HTMLDocument.bootApplication上(https://localhost/dist/bundle.js?v=5y5PspNLD-tK9PXgSUUIscip2N vrKWGkiMyAtnQdaI:4813:46)[]
有人知道这是什么原因吗 我发现了问题。:)
这是复制粘贴错误。在我的两个组件中,初始化是:
@Component({
selector: 'app',
template: require('./app.component.html'),
styles: require('./app.component.css')
})
像这样。请注意,
styles
属性不是数组。显然,应该是这样。使用require在component.ts文件中包含任何css。这将修复建议@Vignesh的问题。我知道这一点。我的组件初始化如下:@component({selector:'app',template:require('./app.component.html'),styles:[require('./app.component.css')]})
我想这就是你的意思吧?当你在styleUrls中使用scss和css文件时,它会抛出错误请记住,我只使用普通的css文件。我不使用任何预处理器。你能详细解释一下你的意思吗?