angular程序9升级到13过程报错

项目场景：

老版本程序是使用的Angular9，现在需要修改业务，顺便升级到13，保持与其他程序版本一致。

过程中遇到了几个问题，记录一下。

Angular： 13.3.0

ng-zorro-antd: 13.4.0

typescript: 4.6.2

---

问题描述、

./src/styles.less.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].rules[0].oneOf[0].use[2]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[8].rules[1].use[0]!./src/styles.less - Error: Module build failed (from ./node_modules/less-loader/dist/cjs.js):

// ================================================================
.table-size(~'middle', @table-padding-vertical-md, @table-padding-horizontal-md, @table-font-size-md);
^
Operation on an invalid type
      Error in /home/wzg/temporaryXX/jiabaologger20240301/BenanUtilities.Jiabao.TestTool.TestClient/node_modules/ng-zorro-antd/table/style/size.less (line 46, column 0)

./src/styles.less - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):

// ================================================================
.table-size(~'middle', @table-padding-vertical-md, @table-padding-horizontal-md, @table-font-size-md);
^
Operation on an invalid type
      Error in /home/wzg/temporaryXX/jiabaologger20240301/BenanUtilities.Jiabao.TestTool.TestClient/node_modules/ng-zorro-antd/table/style/size.less (line 46, column 0)
    at tryRunOrWebpackError (/home/TestTool.TestClient/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/TestTool.TestClient/node_modules/webpack/lib/Compilation.js:5058:12)
    at __webpack_require__ (/home/TestTool.TestClient/node_modules/webpack/lib/Compilation.js:5015:18)
    at /home/TestTool.TestClient/node_modules/webpack/lib/Compilation.js:5086:20
    at symbolIterator (/home/TestTool.TestClient/node_modules/neo-async/async.js:3485:9)
    at done (/home/TestTool.TestClient/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/home/TestTool.TestClient/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/TestTool.TestClient/node_modules/tapable/lib/Hook.js:18:14)
    at /home/TestTool.TestClient/node_modules/webpack/lib/Compilation.js:4993:43
    at symbolIterator (/home/TestTool.TestClient/node_modules/neo-async/async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/less-loader/dist/cjs.js):

// ================================================================
.table-size(~'middle', @table-padding-vertical-md, @table-padding-horizontal-md, @table-font-size-md);
^
Operation on an invalid type
      Error in /home/wzg/temporaryXX/jiabaologger20240301/BenanUtilities.Jiabao.TestTool.TestClient/node_modules/ng-zorro-antd/table/style/size.less (line 46, column 0)
    at Object.<anonymous> (/home/TestTool.TestClient/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].rules[0].oneOf[0].use[1]!/home/wzg/temporaryXX/jiabaologger20240301/BenanUtilities.Jiabao.TestTool.TestClient/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].rules[0].oneOf[0].use[2]!/home/wzg/temporaryXX/jiabaologger20240301/BenanUtilities.Jiabao.TestTool.TestClient/node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[8].rules[1].use[0]!/home/wzg/temporaryXX/jiabaologger20240301/BenanUtilities.Jiabao.TestTool.TestClient/src/styles.less:1:7)
    at /home/TestTool.TestClient/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (/home/TestTool.TestClient/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/home/TestTool.TestClient/node_modules/tapable/lib/Hook.js:14:14)
    at /home/TestTool.TestClient/node_modules/webpack/lib/Compilation.js:5060:39
    at tryRunOrWebpackError (/home/TestTool.TestClient/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/TestTool.TestClient/node_modules/webpack/lib/Compilation.js:5058:12)
    at __webpack_require__ (/home/TestTool.TestClient/node_modules/webpack/lib/Compilation.js:5015:18)
    at /home/TestTool.TestClient/node_modules/webpack/lib/Compilation.js:5086:20
    at symbolIterator (/home/TestTool.TestClient/node_modules/neo-async/async.js:3485:9)

Generated code for /home/TestTool.TestClient/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].rules[0].oneOf[0].use[1]!/home/TestTool.TestClient/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].rules[0].oneOf[0].use[2]!/home/TestTool.TestClient/node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[8].rules[1].use[0]!/home/TestTool.TestClient/src/styles.less
1 | throw new Error("Module build failed (from ./node_modules/less-loader/dist/cjs.js):\n\n\n// ================================================================\n.table-size(~'middle', @table-padding-vertical-md, @table-padding-horizontal-md, @table-font-size-md);\n^\nOperation on an invalid type\n      Error in /home/TestTool.TestClient/node_modules/ng-zorro-antd/table/style/size.less (line 46, column 0)");

---

原因分析：

很明显，问题的出现是因为style.less这个文件，

@input-padding-vertical-base: max(round((@input-height-base - @font-size-base * @line-height-base) / 2 * 10) / 10 - @border-width-base,3px);

@input-padding-vertical-sm: max(round((@input-height-sm - @font-size-base * @line-height-base) / 2 * 10) / 10 - @border-width-base, 0);

@input-padding-vertical-lg: ceil((@input-height-lg - @font-size-lg * @line-height-base) / 2 * 10) / 10 - @border-width-base;

@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2);

@table-padding-vertical-md: @table-padding-vertical * 3 / 4;

@table-padding-horizontal-md: @table-padding-horizontal / 2;

@table-padding-vertical-sm: @table-padding-vertical / 2;

@table-padding-horizontal-sm: @table-padding-horizontal / 2;

经过进一步的判断，发现报错的是以上的8句代码；

经过读源代码，并与默认代码对比，终于发现了写法上的不同之处。

其实这几句都是同一问题，就是参数界定问题，涉及到运算的地方格外注意，less里面的代码并不能做到像js代码一样，比如cell()，这个方法里面的参数就必须是数字，而这个数字如果是涉及到计算，需将计算表达式放进“（）”中，再将该“（）”放进“cell()”中。

---

解决方案：

@input-padding-vertical-base: max(round(((@input-height-base - @font-size-base * @line-height-base) / 2 * 10)) / 10 - @border-width-base,3px);

@input-padding-vertical-sm: max(round(((@input-height-sm - @font-size-base * @line-height-base) / 2 * 10)) / 10 - @border-width-base, 0);

@input-padding-vertical-lg: ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2 * 10)) / 10 - @border-width-base;

@select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2));

@table-padding-vertical-md: (@table-padding-vertical * 3 / 4);

@table-padding-horizontal-md: (@table-padding-horizontal / 2);

@table-padding-vertical-sm: (@table-padding-vertical / 2);

@table-padding-horizontal-sm:(@table-padding-horizontal / 2);

完美解决。