Angular 12.0 LESS building error issue

enk0de commented 3 years ago

Reproduction link

stackblitz, codesandbox doesn't support less related configuration, so i can't include it.

Steps to reproduce

Migrate Angular 11.1 to Angular 12.0.4 and i am using CUSTOMIZED theme.less imported in angular.json

Problem prediction

I guess, at Angular 12, @angular-devkit/build-angular has been changed many things. so, there may be uncontrollable or deprecated things that is used in ng-zorro. pls check this.

What is expected?

correct building.

What is actually happening?

./apps/sme/src/theme.less - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/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 /Users/emmental-huni/emmental/app/node_modules/ng-zorro-antd/table/style/size.less (line 53, column 0) at processResult (/Users/emmental-huni/emmental/app/node_modules/webpack/lib/NormalModule.js:703:19) at /Users/emmental-huni/emmental/app/node_modules/webpack/lib/NormalModule.js:809:5 at /Users/emmental-huni/emmental/app/node_modules/loader-runner/lib/LoaderRunner.js:399:11 at /Users/emmental-huni/emmental/app/node_modules/loader-runner/lib/LoaderRunner.js:251:18 at context.callback (/Users/emmental-huni/emmental/app/node_modules/loader-runner/lib/LoaderRunner.js:124:13) at Object.lessLoader (/Users/emmental-huni/emmental/app/node_modules/@angular-devkit/build-angular/node_modules/less-loader/dist/index.js:52:5)

Environment	Info
ng-zorro-antd	11.4.2
Browser	Chrome

yangjunhan commented 3 years ago

Hi, @hoondeveloper. Could you provide a minimum demo repo here in order to illustrate the building error above?

Sakuara commented 3 years ago

The same problem as u, and the default less-loader version : 7.3.0.

brice-noowu commented 3 years ago

Same issue here, Angular 12.0.5 and latest ng-zorro update. Any tips to temporarly make it work ?

scomans commented 3 years ago

For me it worked when after replaced these 3 variables in my less file:

@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;

hsuanxyz commented 3 years ago

ng-zorro-antd@12.0.0 already released, if there are still problems, please feedback in #6834.

enk0de commented 3 years ago

ng-zorro-antd@12.0.0 already released, if there are still problems, please feedback in #6834.

same issue still exists. https://github.com/NG-ZORRO/ng-zorro-antd/issues/6869

ascandal commented 2 years ago

I also have this issue. Angular 12.2.13 ng-zorro-antd 12.0.2

feryardiant commented 2 years ago

Came across exact same issue & figured out that all I can do is downgrade @angular-devkit/build-angular to ~v0.1100.7 while other Angular packages under @angular/* scope can work just fine in v12.x

NG-ZORRO / ng-zorro-antd