2

I have a styles.css in my Angular 2 application. It's referred to in app.styles object in .angular-cli.json. Inside that css I have urls to background images, e.g:

.bg-game {
  background-image: url("assets/app/game_bg_768.jpg");
}

When compiling the app, it seems Angular 2 copies the files from their location into the root folder of the compiled app and adds to its name a random hash.

For instance assets/app/game_bg_768.jpg will be copied to dist/ (compiled app folder) as game_bg_768.023f195663c85e8f0322.jpg.

Then in the styles css compiled by Angular 2, the reference will be changed accordingly:

.bg-game {
  background-image: url("game_bg_768.023f195663c85e8f0322.jpg");
}

I'd like to disable that whole process, only for images that are linked to in CSS, I don't want to disable random hashes generation for the whole app.

The reason behind this - I'm preloading assets/app/game_bg_768.jpg before the game starts, but since a different url is specified in the compiled css, during the game another request is made to load game_bg_768.023f195663c85e8f0322.jpg.

Another reason is, I'd like my images to remain in my assets folder, I don't want them to be duplicated into the root folder of the compiled app.

Royi Bernthal
  • 882
  • 4
  • 17
  • 45

2 Answers2

1

You can use absolute URLs to avoid it.

.bg-game {
  background-image: url("/assets/app/game_bg_768.jpg");
}

However, after you do that, the compiler won't check if the images exist in assets directory anymore.

Also, if you are deploying your app to a subdirectory of the domain, the browser will look for the asset on /assets instead of /subdirectory/assets. Using base-href or deploy-url won't help.

MIWMIB
  • 1,407
  • 1
  • 14
  • 24
0

As an idea, you need to reconfigure webpack settings and set corresponding loader settings. BUT, AFAIK by default AngularCLI doesn't provide a visible config file for webpack, so, you need to make some tricks for that and keep in mind aftermath or you can try to play with assets configuration in .angular-cli.json

Community
  • 1
  • 1
ivamax9
  • 2,601
  • 24
  • 33
  • Is there perhaps a simpler workaround such as defining the background-image css inside the HTML instead of instead the CSS? Perhaps that way Angular 2 won't get to it? – Royi Bernthal Mar 19 '17 at 03:14
  • @RoyiBernthal you are right, it will be more easy to do) – ivamax9 Mar 19 '17 at 08:56
  • @RoyiBernthal you can edit plain html or move it to component/directive with a template, both variants should be ok. Just FYI: There is no influence of Angular 2. This renaming stuff produced by webpack which is embedded build system in Angular CLI. You can use different build system and keep using Angular CLI, but it's advanced scenario, more details: https://github.com/angular/angular-cli/wiki/stories-moving-out-of-the-cli – ivamax9 Mar 19 '17 at 09:22