Angular upgrades - usually the worst thing ever

Nirgon · Apr 21, 2023

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

Edaw · Apr 21, 2023

Driving now, but maybe this will get you started.

Nirgon · Apr 21, 2023

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)

Edaw · Apr 21, 2023

Are the math options set in the variables.less file as well or only in angular.json? Someone may have put them in variables.less from a previous upgrade. You could also try doing the same.

It's difficult without seeing the actual code.

Away from computer for a while until this evening but will continue to check phone. Access to resources are limited.

Edaw · Apr 21, 2023

Just FYI

I don't know if any of this helps.

MusicForFish · Apr 21, 2023

Nirgon · Apr 23, 2023

MusicForFish said:

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

MusicForFish · Apr 23, 2023

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

I do but my taunt stands!

Nirgon · Apr 24, 2023

Edaw said:
Just FYI

View attachment 470021 View attachment 470019 View attachment 470020

I don't know if any of this helps.

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

Edaw · Apr 24, 2023

Nirgon said:
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

Screenshot 2023-04-24 at 08-33-51 ChatGPT.png

This thing saves so much time.

Nirgon · Apr 24, 2023

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.

Edaw · Apr 24, 2023

It's possible that using the version of `less-loader` defined in your `package.json` could help resolve the issue you're facing. By default, the Angular CLI uses the version of `less-loader` that's bundled with `@angular-devkit/build-angular`.

To specify a different version of `less-loader`, you can try modifying your `angular.json` file to include a custom `stylePreprocessorOptions` configuration. Here's an example:

Code:

```
"architect": {
  "build": {
    "options": {
      "stylePreprocessorOptions": {
        "includePaths": [
          "./node_modules/my-custom-styles"
        ],
        "less": {
          "strictMath": true,
          "math": "always"
        }
      }
    }
  }
}
```

In this example, we're specifying a custom `includePaths` option to point to a folder called `my-custom-styles` in our `node_modules` directory. This folder could contain a customized version of `less-loader` or any other preprocessor-related configuration files.

We're also setting the `strictMath` and `math` options for the `less` configuration to ensure that mathematical operations in our Less code are properly handled.

By modifying the `stylePreprocessorOptions` configuration in your `angular.json` file, you can control how the Angular CLI handles Less code during the build process.

Nirgon · Apr 24, 2023

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.

Edaw · Apr 24, 2023

It seems like you are trying to add options for the Less preprocessor in your Angular project, but are running into issues with the syntax and structure of the `angular.json` file.

First, make sure that you have the `less` and `less-loader` packages installed in your project. You can do this by running the following command in your project directory:

Code:

```
npm install less less-loader
```

Once you have these packages installed, you can add options for the Less preprocessor in your `angular.json` file. Here is an example of what that might look like:

JSON:

```
"architect": {
  "build": {
    "options": {
      "stylePreprocessorOptions": {
        "includePaths": [
          "src/styles"
        ],
        "strictMath": true,
        "math": "always"
      }
    }
  }
}
```

Note that the `stylePreprocessorOptions` object is nested within the `options` object for the `build` target in the `architect` object.

The `includePaths` option specifies the directories that should be searched for Less files when compiling.

The `strictMath` and `math` options enable strict math mode, which can help avoid issues with math operations in Less files.

Make sure to use double quotes around the keys and values in your `angular.json` file, as single quotes are not allowed.

If you are still running into issues with the syntax or structure of your `angular.json` file, you can refer to the official Angular documentation for more information on how to configure your project:

Angular

angular.io

...

Running out for a bit, will check back later.

Question: How much of this is bastardized code from previous upgrades? Did someone take shortcuts before?

Nirgon · Apr 24, 2023

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.

Nirgon · Apr 24, 2023

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

Edaw · Apr 24, 2023

json-diff --color <file1>.json <file2>.json

Nirgon · Apr 24, 2023

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.

Edaw · Apr 24, 2023

Nirgon · Apr 24, 2023

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

Angular upgrades - usually the worst thing ever

Log Wizard

Parody

Log Wizard

Parody

Parody

Ultra Maga Instinct

Log Wizard

Ultra Maga Instinct

Log Wizard

Parody

Log Wizard

Parody

Log Wizard

Parody

Log Wizard

Log Wizard

Parody

Log Wizard

Parody

Log Wizard