Angular upgrades - usually the worst thing ever

So, went from @angular/core 11.2.1 to 15.2.8

#1 -
Tried to run ng build and got this:

./src/assets/less/bootstrap.less - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/less-loader/dist/cjs.js):

@font-size-icon: 20;
Operation on an invalid type:
Error in C:\users\(nirgonlol)\IdeaProjects\(theapplol)\src\assets\less\variables.less (line 116, column0)



So my thought is to try rolling back the @angular-devkit/build-angular back to "^0.1102.10" which seemed to have no problem. But that didnt work either, different errors. Maybe need to some how get a math or strict math variable to true in there or something for the less compiler, no idea on that.



#2 -
Also on ngbuild I see this cryptic message:
./node_modules/(different-common-app)/____ivy_ngcc___/fesm2015/(different-common-app-common.js):727:156-174 - Error: export 'MatChipList' (imported as 'engcc7') was not found in '@angular/material/chips' (possible exports: MAT_CHIP, MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar, MatChipEditInput, MatChipGrid, MatChipGridChange, MatChipInput, MatChipListbox, MatChipListboxChange, MatChipOption, MatChipRow, MatChipSelectionChange, MatChipSet, MatChipTrailingIcon, MatChipModule)


This one? I have no idea but I did bring @angular/material from "11.2.10" to "^15.2.8". Guess I will try rolling @angular/material back to 11.2.10 but I bet its gonna throw a fit, maybe not.... nope didnt work either.

Edaw

Ya I'm trying to get math: 'always' and strictMath: true going but it won't register


Can post the webpack.json etc later (thats where it says to use raw-loader and less-loader)

MusicForFish said:

Click to expand...

Do u not code my dude? Coulda swornt you was.

Edaw said:

Just FYI

View attachment 470021View attachment 470019View attachment 470020

I don't know if any of this helps.

Click to expand...

I have a webpack.config.js that I'm dealing with. It's using whatever less compiler is built into angular-devkit/build-angular which I've got bumped up to 15.2.6 from 0.1102.10 (the one version I found ppl rolled back to for resolving this and it no longer is compatible).

I'll try some of this shit in angular.json
(It wants double quotes on the shit already in there but you put lessCompilerOptions in there with double quotes and it gets mad about using double quotes on the data path lol wtf?)

It has no other previous math or strictMath settings, everything seemed to just work with that ancient devkit and I found information online supporting that

It ignored that shit too, same result

Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/less-loader/dist/cjs.js)

@base-font-size: 14px;
@base-font-size-rem: 14 * @one-pixel-rem;
^
Operation on an invalid type




Angular fucking sucks. I did multi version react upgrades in a fraction of the time to several apps.

I think the answer is to get this to use the less-loader I have defined in package.json and not let it try to use this one baked into the devkit. No idea how and it will be reading piles of angular documentation that doesn't give any answers as a starting point.

Here's what I got trying to add that to angular.json:

Data path "/stylePreprocessorOptions" must NOT have additional properties(less)







Strange... but I'll look into this stylePreprocessorOptions..

The existing has less target within webpackconfig.js as

{ test: /\.less$/, exclude: /node_modules/, loaders: ["raw-loader","less-loader"],

And I was sticking variations of options/lessOptions/lessLoaderOptions with variations of always , true and on for strict math in there.


Found someone having a similar issue with less-loader 11.1.0 (the version in my devkit) here which resolved for them using "craco" (who the fuck knows what that is):

stackoverflow.com/questions/75013955/module-build-failed-from-node-modules-craco-less-modules-less-loader-dis

But no luck following a similar path there. Angular.json doesn't like any of this stuff I'm trying there. This is such an unnecessary pain in the ass and the answer is stay up all night and screw with every possible permutation, then it might work or just run into a different problem.

Some pretty smart Indian dude and a less than talented white kid that got fired when I was there threw it together. Now I'm dealing with it.

I pulled down the original starting point again, tried to build it and discovered upgrading the cli/node makes it so I can't make ng build work for the previous setup. I know that worked before upgrading node/angular cli on my machine.

So that's fun too.

But what I did glean from that is the old devkit version was using less-loader 7.3.0. so I'm going with those preprocessor options to use less-loader 7.3.0 from node_modules right now and tinkering.

Yeah even with the stylePreprocessorOptions and less-loader provided from node_modules it is still saying in the build error that it is failed from @angular-devkit lmao

I got it to work on my build by wrapping all these

variable * @one-rem

shits in parenthesis within the less files.

Now it has other stupid problems to figure out and I gotta get into a meeting.

This is one of those things that no one in the cliques will ever have to touch, and they rotate it from scapegoat to scapegoat

Wonder what happens if I'm gone one day and it's 11 versions behind, lighting up some security dashboard like a Christmas tree