Corrupted image when using css-loader+file-loader+AngularCompilerPlugin

[JonWallsten]

Versions

Node: 9.3.0
Npm: 5.5.1
Angular: 5.1.0
@ngtools/webpack: 1.9.1
css-loader: 0.28.7
file-loader: 0.11.2
webpack: 3.6.0

Repro steps

These steps are borrowed from here since share the same problem and my project is to complex to just do a plunker from: PatrickJS/PatrickJS-starter#1939

1. Start with clean installation of angular-starter
   Add declaration in the styles.scss:

body {
  background: url('./../assets/img/angular.png');
}

2. Create scss file in the directory src/app/+detail/+child-detail/child-detail.scss with this single declaration:

h1 {
  background: url('../../../assets/img/angular.png');
}

3. Add styles to the ChildDetailComponent:

@Component({
  selector: 'child-detail',
  template: `
    <h1>Hello from Child Detail</h1>
  `,
  styleUrls: ['./child-detail.scss'],
})
export class ChildDetailComponent implements OnInit {

  public ngOnInit() {
    console.log('hello `ChildDetail` component');
  }

}

4. Run npm run build:aot:prod

Observed behavior

In the dist folder there will be two generated png files instead of one. One file is slightly larger then the original file. It's also corrupted and can't be viewed (not even in PS). They have different hashes in the generated name, which I guess makes sense since it's the MD5 hash of the file if I'm not mistaken.
When looking in are main.js file I can see that the images references in the background: url() is the corrupt image. This was not happening when running Angular 4 and JIT.

Desired behavior

Only one image should be created and it should not be corrupt.

Mention any other details that might be useful (optional)

I've read through tons of tickets, documentation and tried more combinations in my Webpack config than I can count. The reason I'm writing this ticker here is because of the following quote in the issue tracker.

url()'s in component stylesheets are now processed. This allows the CLI to hash the assets and supports long-term caching. However, the URL now needs to be build-time discoverable and the path must be relative to the component stylesheet for this to work. This also has the advantage that component based assets can be encapsulated within the component source location, if desired.

Forgive me if this is not an Angular CLI issue. But I can't find any related issue with css-loader and file-loader alone. And since the first image is generated fine I suspect something is happening after they are done. Unfortunately there's so much stuff happening behind the curtain, I don't even know who creates the second file.

This is a log from my own project, not the sample one.
You can clearly see the correct image 'bf8...' being generated.

Child src/app/login-view/login-view.component.scss:
                                   Asset    Size  Chunks             Chunk Names
    bf801dc8612d99ff6adbe37a8dca7877.jpg  103 kB          [emitted]
     + 1 hidden asset
    [10Fg] ./src/app/login-view/login-view.component.scss 363 bytes {0} [built]
            factory:812ms building:1ms = 813ms
    [PGCf] ./src/assets/images/hero-startpage-1920x1000.jpg 82 bytes {0} [built]
           [] -> factory:287ms building:371ms = 658ms
    [scMX] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/app/login-view/login-view.component.scss 827 bytes {0} [built]
           [] -> factory:492ms building:4458ms = 4950ms
        + 1 hidden module

But there is no references in the log to the corrupt file besides in the list of generated files.
It just magically appear in the list of resources. And as mentioned earlier it also ends up in the generated CSS instead of 'bf801dc8612d99ff6adbe37a8dca7877.jpg'.

f143e4b206e3c901697fe0aeca784d7b.jpg     188 kB          [emitted]

[clydin]

That starter doesn't appear to be using the AngularCompilerPlugin but rather a different plugin combined with the @ngtools webpack loader. If this can be reproduced by using the @ngtools plugin then this is something that can be investigated further. Otherwise this is really an unsupported configuration and the best course of action would be to follow through with the issue on the starter's project.

[JonWallsten]

I'm using AngularCompilerPlugin in my project though. I will continue to investigate this today. Will try to find out where in the process this extra corrupt image is created and by what loader.

But as you say, It might definitely be a configuration issue. There's so much angular specific stuff going on I don't really know whats doing what. I can upload our configs when I'm back at work.

[JonWallsten]

It doesn't seem like this is connected to this plugin in particular. It's reproducible with AnuglarCompilerPlugin.

[michaelfaisst]

@JonWallsten did you find a solution to this problem yet? I'm having the same behaviour and can't figure out the problem too, since it worked with Angular 4 and the AotPlugin from @ngtools. Behaviour came up when switching to angular 5 and AngularCompilerPlugin

[JonWallsten]

@michaelfaisst Sorry, I was digging the entire weekend, but my knowledge of Webpack, and Angular for that matter, is to thin.
Please check this thread for more info: PatrickJS/PatrickJS-starter#1939
Maybe @clydin can peek at it as well. I'm really stuck!

[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.}