Unable to locate stylesheet when building my project after Angular 17 migration

[justToPassage]

Select Topic Area

Bug

Body

Hello,

I have an Angular project in version 16 that I've just migrated to version 17. I'm using the Verona template in version 17.

My problem is during the build, in fact I have 2 warnings coming from the Verona file : assets/layout files

▲ [WARNING] Unable to locate stylesheet: C:\assets\layout\layout\preloading.css
▲ [WARNING] Unable to locate stylesheet: C:\assets\layout\styles\theme\theme-light\indigo\theme.css

these errors appeared during migration to Angular 17...

I was able to remove the warnings by using the webpack builder proposed on Angular 16 which is @angular-devkit/build-angular:browser and not the one used (recommended) on Angular 17: @angular-devkit/build-angular:application.

I checked the Angular configuration files, but I couldn't find a solution.

Do you have any idea where this problem might be coming from?

[justToPassage]

the link doesn't lead to anything, in fact when compiling, the builder thinks it's an absolute path and not a relative one, on the browser builder proposed by Angular 16, it worked fine but with the new EsBuild builder, I get these 2 warnings.

For the record, I use these links in a href in my index.html file:

<link
      rel="stylesheet"
      type="text/css"
      href="assets/layout/styles/layout/preloading.css"
     />
    <link
      id="theme-link"
      rel="stylesheet"
      type="text/css"
      href="assets/layout/styles/theme/theme-light/indigo/theme.css"
      />

Update Angular configuration: Ensure that Angular configuration files (angular.json) are correctly updated for Angular 17. Check the styles section in the "build" options of your project configuration. Make sure the paths are correct and correspond to the actual locations of the stylesheets.

It 's configured like this file angular.json :

"architect" : {
        "build" : {
          "builder" : "@angular-devkit/build-angular:application",
          "options" : {
            "outputPath" : {
              "base" : "dist/project"
            },
            "index" : "src/index.html",
            "polyfills" : ["zone.js"],
            "tsConfig" : "tsconfig.app.json",
            "inlineStyleLanguage" : "scss",
            "assets" : ["src/favicon.ico", "src/assets"],
            "styles" : ["src/styles.scss"],
            "scripts" : [],
            "browser" : "src/main.ts"
          },

I tried what you gave me but it doesn't work, I get an error instead that it can't find the style files.

the problem is probably in an angular configuration file, because the builder interprets paths as absolute and not relative

[justToPassage]

Hello,

I found an alternative. I encountered this issue when building my project. To be precise, these two CSS imports are in the index.html file. So, I decided to import these CSS files dynamically within the AppComponent. I created a method that allows loading styles dynamically which I call in the ngOnInit of the AppComponent with the css file path.

This issue appears because, es-builder can't to solve relative path.

[mariogenov]

Hello,
I had the same problem after migration to Angular v18. I moved those css links to angular.json under "styles" node:

...
"styles": [
...
"src/assets/xxx/xxx.css"
],