Add support for angular 20

[Canoobi]

To upgrade Angular in our project to version 20, remove all leading tildes (~) from your SCSS import paths. Angular 20 no longer recognizes the ~ prefix as an alias for node_modules, so keeping it will cause your stylesheet imports to fail.

[Canoobi]

src/styles/_webpack.assets-paths.scss:
@@ -1,3 +1,3 @@
-$icons-path: "~@db-ui/core/dist/icons/";
-$images-path: "~@db-ui/core/dist/images/";
-$fonts-path: "~@db-ui/core/dist/fonts/";
+$icons-path: "@db-ui/core/dist/icons/";
+$images-path: "@db-ui/core/dist/images/";
+$fonts-path: "@db-ui/core/dist/fonts/";

[mfranzke]

@Canoobi thanks a lot for your feedback. To my knowledge, Angular even also switched from Webpack to vite or another rollup based bundler. So would switching to the _rollup.assets-paths.scss file work for you, that doesn't include those tildes anymore?

[Canoobi]

@mfranzke thanks for the tip! I'll have a look and give you feedback.

[jonaskuske]

Angular is using esbuild directly (and Vite just for the dev server).

But my team is successfully using rollup asset paths:

@use "@db-ui/core/sources/css/rollup.assets-paths" as rollupAssetsPaths;
@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
  $icons-path: rollupAssetsPaths.$icons-path,
  $images-path: rollupAssetsPaths.$images-path,
  $fonts-path: rollupAssetsPaths.$fonts-path
);