Ressources included in CSS with a relative path are broken

[cyrilletuzi]

Versions

cli 6.0.0-rc.5

Repro steps

• Create a new projet with last RC
• In src/style.css, include a ressource with a relative path, like a font:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(fonts/material-icons.woff2) format('woff2');
}

Observed behavior

If the ressource is small, it's inlined with data: so it works.
If the ressource is big, the path is transformed to an URL relative to the current location, so:

• if you go in the app from the domain (/), it works (URL will be http://www.example.com/material-icons.woff2)
• but if you go directly in some page of the app (like /page/2), it fails (URL will be http://www.example.com/page/material-icons.woff2)

Desired behavior

Should work.

[clydin]

This appears to be an issue with embedded JS stylesheets (used only in development). Using the extract CSS option provides the proper path. Relative assets within an actual stylesheet are referenced to the location of the stylesheet.

[cyrilletuzi]

Unfortunately a lot of options, including --extract-css, have been deleted for ng serve (#10304).

[embryologist]

experiencing the same here

[clydin]

@cyrilletuzi many of those options are now available on master. Unfortunately, not the one in question here.

However, a fix has been provided to workaround the underlying issue in the style-loader dependency with PR angular/devkit#743 and should be in the next release.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}