Webpack 4与Angular 5报错：Expected 'styleUrls'应为字符串数组

我帮你排查过这个问题，通常这个报错和Angular组件的styleUrls写法、以及Webpack里的模板处理loader配置有关，结合你的现有配置，给你几个针对性的修复方案：

1. 先检查组件中的styleUrls格式 #

升级后的Angular对组件元数据的校验更严格了，哪怕只有一个样式文件，styleUrls也必须是字符串数组，很多时候报错就是因为不小心写成了单个字符串：

// ❌ 错误写法：直接写字符串
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: './demo.component.css'
})

// ✅ 正确写法：用数组包裹
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: [ './demo.component.css' ]
})

先全局检查所有组件的styleUrls，确保没有遗漏的单字符串情况，这是最常见的触发原因。

2. 调整angular2-template-loader的配置 #

你的Webpack配置里给angular2-template-loader加了keepUrl=true参数，这个参数在新版本的Angular和Webpack组合下可能会导致样式路径解析异常，进而触发这个报错。可以先去掉这个参数试试：

// 修改后的ts规则
module: {
  rules: [
    // ...其他规则
    {
      test: /\.ts$/,
      loaders: ['ts-loader', 'angular2-template-loader'],
      exclude: [/\.(spec|e2e)\.ts$/]
    },
    // ...其他规则
  ]
}

如果还是不行，更推荐直接替换掉angular2-template-loader——这个loader现在维护性较差，Angular官方推荐使用@ngtools/webpack来处理模板和样式，它能更好地适配新版本的Angular（8+）和Webpack：

// 先安装依赖：npm install @ngtools/webpack --save-dev
const { AngularCompilerPlugin } = require('@ngtools/webpack');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.ts$/,
        loader: '@ngtools/webpack',
        exclude: [/\.(spec|e2e)\.ts$/]
      },
      // ...其他规则
    ]
  },
  plugins: [
    // 添加Angular编译器插件
    new AngularCompilerPlugin({
      tsConfigPath: './tsconfig.json',
      mainPath: './src/main.ts',
      sourceMap: true
    })
  ]
}

使用@ngtools/webpack后，它会自动处理组件的模板和样式引用，不需要额外的angular2-template-loader，能避免很多版本兼容问题。

3. 完善CSS loader的配置 #

你的CSS规则没写完，确保style-loader和css-loader的配置正确，尤其是要区分全局样式和组件内联样式：

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
  // 只处理src目录下的组件样式，全局样式可以单独配置
  include: path.resolve(__dirname, 'src')
}

如果是全局样式，建议用mini-css-extract-plugin提取成单独的CSS文件，避免和组件内联样式冲突。

先从第一步的组件格式检查开始，大部分情况下这个报错都能解决，如果还不行再调整Webpack的loader配置。

内容的提问来源于stack exchange，提问作者k102